vue-cli调用原生高德地图数据化展示百万信号点一、

1,000 阅读1分钟

vue 有自己封装的高德地图框架【vue-amap】但是讲道理不是很灵活方便,俗称不好用。地址放着这里了https://elemefe.github.io/vue-amap/,废话不多说我们配置原生高德地图。 ###一、先去高德的图注册一个secret-key导入时需要用

在我的应用里就可以找到。很简单!! ###二、在index.html文件header里导入

注意一定要加在header里面不然调不出来。 ###三、在webpack.base.conf.js 里的module.exports = {}加入以下代码

 externals: {
    AMap: 'AMap',
    Loca:'Loca' // 高德地图配置
  },

ok就这么简单

四、初始化地图

<div id="container" v-loading="loading" class="map">
-------------
<!--data里面 map:null-->
      this.map = new AMap.Map("container", {
      center: [114.3828, 23.08377],
      resizeEnable: true,
      // disableSocket: true,
      viewMode: "3D",
      zooms: [7, 15],
      // mapStyle: "amap://styles/whitesmoke",
      lang: "chn"
      // showLabel: false,
      // pitch: 0,
      //  viewMode: '3D'
      // layers: [
      //   new AMap.TileLayer.RoadNet({
      //     //rejectMapMask:true
      //   }),
      //   new AMap.TileLayer.Satellite()
      // ]
    });

ok搞定!!加关注点赞兄弟们,,,3Q