vue2使用高德地图+自定义样式不生效+密钥申请

vue2使用高德地图

1. 高德地图申请key

2. vue代码中使用：

1. 安装

npm install @amap/amap-jsapi-loader

2. 页面中使用

<template>
  <div id="map" style="width: 900px; height: 800px;"></div>
</template>
 
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
 
export default {
  name: 'MapComponent',
  mounted() {
    window._AMapSecurityConfig = { securityJsCode: '' }; // 安全密钥，不写这行，mapStyle不生效
    AMapLoader.load({
      key: '',
      version: '2.0',
      plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
    }).then((AMap) => {
      const map = new AMap.Map('map', {
        zoom: 11,
        center: [116.397428, 39.90923], // 设置中心点坐标
        mapStyle: 'amap://styles/自定义样式id',//自定义样式id
      });
      
      // 进行进一步的地图操作...
    }).catch(e => {
      console.log(e);
    });
  }
};
</script>

3. 高德自定义样式

1. 网址：https://geohub.amap.com/mapstyle/index

2. 使用方式：

3.将生成的id填入mapStyle

！！！！！！！！！自定义mapStyle不生效的原因：

window._AMapSecurityConfig = { securityJsCode: ‘’ }; // 安全密钥，不写这行，mapStyle不生效