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>