在vue項目中使用新版的高德地圖

自2021年12月02日升級，升級之后所申請的 key 必須配備安全密鑰 jscode 一起使用

 

 

 現在新版本有安全密鑰，之前舊的不影響。

之前使用的自定義地圖用新申請的密鑰加載不出

 

下面是在vue項目中的使用方法

1.創建高德賬號，創建應用，申請key

然后看下文檔，按 NPM 方式使用 Loader

 2.安裝Loader

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

3.在頁面中使用

<template>
  <div class="dashboard-editor-container">
    <div class="map_data" id="map_my" :style="{width: `1920px`,height: `880px`}">
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  name: 'newmap',
  data() {
    return {
      Map: null,//地圖對象
    }
  },
  created() {
    window._AMapSecurityConfig = {
      securityJsCode: '你的密鑰',
    }
    let that = this;
    AMapLoader.load({
      "key": "你的key",// 申請好的Web端開發者Key，首次調用 load 時必填
      "version": "2.0",// 指定要加載的 JSAPI 的版本，缺省時默認為 1.4.15
      "plugins": [],// 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
      that.Map = new AMap.Map('map_my', {
        mapStyle:'amap://styles/darkblue', //設置地圖的顯示樣式

 zoom: 13,//設置初始化級別
 zooms: [5, 30], //設置縮放級別范圍 10-15 級
 center: [121.458993, 31.244504],//中心點
 }); }).catch(e => { console.log(e); }) }, mounted() { }, methods: {} } </script>

<style lang="scss" scoped>
</style>

下面是效果