Vue 项目中使用高德地图2.0

一、如何在Vue中引入基础高德地图

根据官网提示，在Web端，我们需要高德地图加载器：npm i @amap/amap-jsapi-loader -S

1. 步骤一：注册并登录高德地图开放平台，申请密钥

高德地图开放平台

实际截图

image.png

2、步骤二：安装高德地图加载器

npm  i  @amap/amap-jsapi-loader -S

3、封装一个自定义地图组件，并初始化地图

实际截图

image.png

注意点：

2021年起，高德地图必须使用安全密钥 即是

window._AMapSecurityConfig = {
    securityJsCode: '安全密钥',
}

实际截图

image.png

二、根据关键词搜索，并定位到搜索的位置

实际截图

image.png

三、添加放大缩小地图、转盘

四、点击地图获取经纬度

initMap() {
            AMapLoader.load({
                "key": "key", // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ["AMap.Scale","AMap.ToolBar","AMap.AutoComplete","AMap.PlaceSearch","AMap.ControlBar","AMap.MouseTool"],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                // "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                // 鼠标点击获取经纬度
                this.map.on('click', function(e) {
                    console.log("经度",e.lnglat.getLng())
                    console.log("纬度",e.lnglat.getLat())
                });
            }).catch(e => {
                console.log(e);
            });
        },

五、地图上绘制标记点、圆形、曲线、矩形和多边形等,及其绘制清除

六.清除绘制

 // 清除
 // map.remove(overlays)
 // overlays = [];
 // 或者
 // mouseTool.close(true)//关闭，并清除覆盖物

七. 高德参考文档

高德地图开放webjs文档