Bootstrap

【vue-amap】高德地图搜索地点及安全密钥配置

vue-amap

效果如上,未更新前无法显示区域

在高德地图开发平台里,添加一个这样类型的key

在这里插入图片描述

配置修改

main.js

// 高德地图
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: '445701bd34854887f03c540b449a620f',
  plugin: [
    'AMap.Autocomplete', // 输入提示插件
    'AMap.PlaceSearch', // POI搜索插件
    'AMap.Scale', // 右下角缩略图插件 比例尺
    'AMap.OverView', // 地图鹰眼插件
    'AMap.ToolBar', // 地图工具条
    'AMap.Geolocation', // 定位控件,用来获取和展示用户主机所在的经纬度位置
    'AMap.MarkerClusterer',
    'AMap.Geocoder'
  ],
  uiVersion: '1.0',
  v: '1.4.15'
})
Vue.config.productionTip = false
// 开发环境
window._AMapSecurityConfig = {
   securityJsCode: '安全密钥',
}
// 生产环境 后台配置的安全密钥地址 详见官方配置文件
// window._AMapSecurityConfig = {
  // serviceHost: `xxx/_AMapService`
//}
;