使用高德地图API做PC端

1、准备

申请 web 平台（JS API）的 key 和安全密钥

2、<script> 标签加载 JS API脚本

推荐使用 JS API Loader 来加载，引入在控制台申请的 key 和安全密钥

index.html

申请的安全密钥

3、HTML页面准备

delivery.vue

需要设置元素的宽高样式

4、页面地图

使用 JS API Loader（API 加载器）

设置 key

container"为 <div> 容器的 id

初始化前需要获得AMap对象，创建地图实例的代码写在Loader的.then((AMap)=>{})中或者<script>标签加载后。

5、创建地图对象

const map = new AMap.Map("container", {

viewMode: '2D', //默认使用 2D 模式

zoom: 11, //地图缩放级别

center: [116.397428, 39.90923], //地图中心点

});

地图加载完成事件

map.on('complete', function() {

document.getElementById('tip').innerHTML = "地图图块加载完毕！当前地图中心点为：" + map.getCenter();

});

6、绘制线路

AMap.plugin(["AMap.Driving"], () => {

                        lines["optimizeCompare"].forEach(element => {

                            this.drawLine(AMap, element);

                        });

                    });

drawLine(Amap, lineData) {

            const driving = new Amap.Driving({

                map: this.map,

                showTraffic: false,

                isOutline: false,

                hideMarkers: true,

            });

            driving.search(lineData.origin, lineData.destination, { waypoints: lineData.waypoints }, (status, result) => {

                if (status === "complete") {

                    //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误

                    //查询成功时，result 即为对应的驾车导航信息

                    this.route(result.routes[0], lineData.color)

                } else {

                    console.log("获取驾车数据失败：" + result);

                }

            });

        },

7、新增图标

pointer['warehouse'].forEach(element => {

                        this.initPointerHouse(AMap, element);

                    });

initPointerHouse(AMap, warehouse) {

            // 基地图标点位

            const startIcon = new AMap.Icon({

                // 图标的取图地址

                image: "https://qtskhz.oss-cn-hangzhou.aliyuncs.com/mc/corn.png",

                // 图标所用图片大小

                imageSize: new AMap.Size(48, 48),

            });

            const marker = new AMap.Marker({

                map: this.map,

                position: [warehouse.longitude, warehouse.latitude],

                icon: startIcon, //图标参数

                offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点

                label: {

                    content: warehouse.name,

                    direction: 'top', //文本标注方位 可选值：'top'|'right'|'bottom'|'left'|'center'，默认值: 'right'

                    style: {

                        color: '#86909C', // 设置文本颜色

                        border: 0, // 设置文本边框为0

                    }

                }

            });

            marker.setMap(this.map);

        },

8、在运行阶段监听地图的点击事件

const clickHandler = function (e) {

console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');

};

map.on("click", clickHandler);

点击图标事件

<button id="clickOn" class="btn" style="margin-right:1rem;">绑定事件</button>

<button id="clickOff" class="btn">解绑事件</button>

var marker = new AMap.Marker({

map: map,

icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",

position: [116.405467, 39.907761]

});

function showInfoM(e){

var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置点击了marker！'

document.querySelector("#text").innerText = text;

}

function clickOn(){

log.success("绑定事件!");

marker.on('click', showInfoM);

marker.on('mouseover', showInfoOver);

marker.on('mouseout', showInfoOut); }

function clickOff(){

log.success("解除事件绑定!");

marker.off('click', showInfoM);

marker.off('mouseover', showInfoOver);

marker.off('mouseout', showInfoOut); }

// 给按钮绑定事件

document.getElementById("clickOn").onclick = clickOn;

document.getElementById("clickOff").onclick = clickOff;

9、点击线路

10、销毁地图对象

不再需要地图或在页面切换时，应销毁地图对象以释放资源。调用map.destroy()方法可销毁地图。在调用map.destroy()方法之前，需要解绑地图上的事件。调用map.destroy()方法后，将地图对象赋值为null，再清除地图容器的 DOM 元素，避免内存泄漏和性能问题。

//解绑地图的点击事件

map.off("click", clickHandler);

//销毁地图，并清空地图容器

map.destroy();

//地图对象赋值为null

map = null

//清除地图容器的 DOM 元素

document.getElementById("container").remove(); //"container" 为指定 DOM 元素的id