快捷導(dǎo)航

vue集成高德地圖amap-jsapi-loader的實(shí)現(xiàn)

更新時(shí)間：2023年06月09日 15:03:04 作者：一只小可樂吖

本文主要介紹了vue集成高德地圖amap-jsapi-loader的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一：申請(qǐng)高德key

去高德官網(wǎng)去創(chuàng)建一個(gè)屬于自己的地圖應(yīng)用（得到key和秘鑰）。

首先，我們要注冊(cè)一個(gè)開發(fā)者賬號(hào)，根據(jù)實(shí)際情況填寫，身份寫個(gè)人：

進(jìn)入我的應(yīng)用： ?????

創(chuàng)建新應(yīng)用

獲取key和密鑰

注意： 2021年12月02日后創(chuàng)建的 key 必須配備安全密鑰一起使用

二：在vue中使用高德地圖

這里使用的是amap-jsapi-loader 。@amap/amap-jsapi-loader是一個(gè)用于加載高德地圖JavaScript API的工具庫。它可以幫助開發(fā)者快速、簡便地在網(wǎng)頁中引入高德地圖API，并提供了一些方便的配置選項(xiàng)和回調(diào)函數(shù)，以便開發(fā)者更好地控制地圖的加載和初始化過程。該工具庫適用于各種前端框架和庫，如React、Vue、Angular等。

在項(xiàng)目中應(yīng)用：

1、控制臺(tái)安裝：

npm i amap-jsapi-loader --save

2、在main.js中配置秘鑰

    //配置安全密鑰
window._AMapSecurityConfig = {
    securityJsCode: '你的密鑰' //*  安全密鑰
}

3、項(xiàng)目中創(chuàng)建MapView.vue文件用作地圖組件

4、在 MapView.vue 地圖組件中創(chuàng)建 div 標(biāo)簽作為地圖容器，并設(shè)置地圖容器的 id 屬性為 map；

 <div class="content">
        <!-- 用來顯示地圖 -->
        <!-- 可以不寫寬度，但一定要有高度 -->
        <div id="Map" style="height: 500px;">
        </div>
 </div>

5、在地圖組件 MapView.vue 中引入 amap-jsapi-loader

import AMapLoader from '@amap/amap-jsapi-loader';

6、地圖初始化函數(shù) initMap，這里簡單實(shí)現(xiàn)了marker點(diǎn)標(biāo)記功能

<script>
//引入高德地圖
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
    name: 'IndexMap',
    data() {
        return {
            map: null, //地圖實(shí)例
            markerdom: null,
            marker: [],
            markernum: [
            [108.925107, 34.238578],
            [108.977807, 34.240636],
            [108.977893, 34.20508],
            [108.915065, 34.202951],
            [108.920713, 34.226592],
            ......
            //為了展示，用的寫好的數(shù)據(jù)
        ]                        
        }
    },
    mounted() {
        this.initMap();//調(diào)用地圖初始化函數(shù)：mounted 函數(shù)會(huì)在 DOM 初始化完成后調(diào)用
    },
    methods: {
        initMap() {
            AMapLoader.load({
                key: "", // 申請(qǐng)好的Web端開發(fā)者Key，首次調(diào)用 load 時(shí)必填
                //2.0版本太卡了 ，所以使用的1.4.0版本  其插件也有不同  如：ToolBar
                version: "1.4.0", // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
                resizeEnable: true,
                plugins: [
                    "AMap.ToolBar", //工具條
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", //定位
                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                console.log(AMap);
                this.map = new AMap.Map("Map", { //設(shè)置地圖容器id
                    resizeEnable: true,
                    rotateEnable: true,
                    pitchEnable: true,
                    zoom: 15,
                    pitch: 80,
                    rotation: -15,
                    viewMode: '3D',//開啟3D視圖,默認(rèn)為關(guān)閉
                    buildingAnimation: true,//樓塊出現(xiàn)是否帶動(dòng)畫
                    expandZoomRange: true,
                    zooms: [3, 20],
                    center: [108.946651, 34.222718], //初始化地圖中心點(diǎn)位置
                });
                this.markerdom = '' +
                    '<div class="custom-content-marker">' +
                    '   <img src="/icon_bike.png">' +
                    '</div>';
                for (let i = 0; i < this.markernum.length; i++) {
                    this.marker.push(new AMap.Marker({
                        position: new AMap.LngLat(this.markernum[i][0], this.markernum[i][1]),// Marker經(jīng)緯度
                        content: this.markerdom, // 將 html 傳給 content
                        offset: new AMap.Pixel(-13, -30) // 以 icon 的 [center bottom] 為原點(diǎn)
                    }));
                }
                this.map.add(this.marker)
                console.log(this.marker);
            }).catch(e => {
                console.log(e);
            })
        }
    }
}
</script>

看一下效果：