介绍高德地图：

打开index.html，参考高德地图的JavaScript API:

脚本类型=' text/JavaScript ' src=' http :http://web API . AMAP.com/maps？V=1.3key=您的API密钥/脚本在“key=”中添加您申请的密钥，密钥不需要引号。

要引入高德地图用户界面组件，您只需要在上面的代码之后添加一串代码：

脚本src=' http://webapi.amap.com/ui/1.0/main.js'/script配置网络包

打开webpack.base.conf.js文件，查找module.exports，并在externals对象中添加一行：“AmaP”:“AmaP”

externals : { ' AMAP ' : ' AMAP '，}，到目前为止介绍的步骤已经完成，并创建了一个vue文件

template div id=' container ' class=' my map '/div/template script从' AMap '导入AmaP；//介绍高科技地图exportdefault {mounted () {this。loadmap()到页面中；//加载映射和相关组件}，方法： { load map(){ const map=new map . map(' container '，{ zoom 3360 9 })；} }}/scriptstyle作用域。mymap { width: 300pxheight: 300px}/style，可以毫无意外地看到地图：

如果使用高德地图用户界面组件，则可以在加载地图的同时加载用户界面组件：

loadmap(){ const map=new AMap。Map('容器'，{ zoom : 9 })；AMapUI.loadUI(.)//加载UI组件}组件中的内容是根据需求定制的。每个组件在高德地图官网都有演示，可以直接粘贴进去使用。

以上将高德地图及其UI组件引入vue项目的方法，都是边肖分享的内容。希望能给大家一个参考，支持我们。