vue 高德地图使用

在  index.html 中引入

<script src="https://webapi.amap.com/maps?v=1.4.15&key=秘钥"></script>

 

在 vue.config.js 中 添加

configureWebpack: config => {

    config.externals = {

      AMap: "window.AMap",

    }

  }

在 ***.vue 中

<div id="container" class="container"></div>  

<script>
import AMap from "AMap";
export default {
    created() {
        setTimeout(function() {  //直接加载地图会显示空白
            const map = new AMap.Map("container");

            const layer = new Loca.LineLayer({
                eventSupport: true,  //必须加 不然无法触事件
                map: map
            });

            layer.on("mousemove", function(ev) {
                console.log("Click target: ", ev.target); // 触发click事件的元素
                console.log("Event type: ", ev.type); // 事件名称
                console.log("Raw Event: ", ev.originalEvent); // 原始DomEvent事件
                console.log("Raw data: ", ev.rawData); // 触发元素对应的原始数据
                console.log("LngLat: ", ev.lnglat); // 元素所在经纬度
            });

            let citys = [
                {
                    lnglat: ["116.3648,39.9993", "120.3647,59.8593"],
                    name: "哈哈哈"
                }
            ];

            layer.setData(citys, {
                lnglat: "lnglat"
            });

            layer.setOptions({
                style: {
                    color: "#4FC2FF",
                    opacity: 0.9,
                    lineWidth: 20
                }
            });

            // 渲染
            layer.render();
        });
    }
};
</script>