vue-cil 脚手架中 使用地图

1.先安装 vue-amap

npm install vue-amap --save

2.然后在main.js 写

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'your key',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});

3.然后在App.vue 中写

4.然后在你需要用地图的文件 的template 中写

  

    

        关闭
        
    

    
  

5.然后在你需要地图的vue 文件中的script 的data 下的return 中写

searchOption: {
    city: '呼和浩特市',
    citylimit: true
},
mapCenter: [111.66035052, 40.8283188731],
lat: 0,
lng: 0,

6.然后在你需要地图的vue文件中的script 的methods下写着个搜索的方法

//搜索
onSearchResult(pois) {
    console.log("pois=", pois);
    let latSum = 0;
    let lngSum = 0;
    if(pois.length > 0) {
          pois.forEach(poi => {
            let {lng,lat} = poi;
            lngSum += lng;
            latSum += lat;
            // this.markers.push([poi.lng, poi.lat]);
        });
        let center = {
            lng: lngSum / pois.length,
            lat: latSum / pois.length
        };
        this.mapCenter = [center.lng, center.lat];
    }
    this.lat = pois[0].lat;
    this.lng = pois[0].lng;
    this.user.address = pois[0].address + pois[0].name;
    this.aresadd = pois[0].address + pois[0].name
    this.searchshow = false;
},