高德地图vue的调用

import AMap from 'vue-amap'AMap.initAMapApiLoader({ key: '5f7b2f69a795d2e96d762419e81c5c1f',//自己申请 plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.

晴天Smile

4382人浏览 · 2017-11-15 15:34:24

晴天Smile · 2017-11-15 15:34:24 发布

 import AMap from 'vue-amap'

   AMap.initAMapApiLoader({
  
     key: '5f7b2f69a795d2e96d762419e81c5c1f',//自己申请
  
     plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar',
  
      'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation','AMap.Geocoder']
  
   })
  
  Vue.use(AMap)
 
     <template>
    
       <div>
    
         <div class="amap-page-container">
    
           <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" :plugin="plugin" :events="events">
    
             <el-amap-info-window :position="mywindow.position" :content="address" :visible="mywindow.visible" :events="mywindow.events"></el-amap-info-window>
    
             <el-amap-marker :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable"></el-amap-marker>
    
             <el-amap-circle :center="circle.center" :radius="circle.radius" :fillOpacity="circle.fillOpacity" :events="circle.events"
    
               :strokeColor="circle.strokeColor" :strokeStyle="circle.strokeStyle" :fillColor="circle.fillColor"></el-amap-circle>
    
           </el-amap>
    
           <div class="toolbar">
    
             <span v-if="loaded">
    
               location: lng = {{ lng }} lat = {{ lat }}
    
             </span>
    
             <span v-else>正在定位</span>
    
           </div>
    
           <span>{{ address }}</span>
    
         </div>
    
       </div>
    
     </template>
    
     <style>
    
       .amap-page-container {
    
         height: 500px;
    
       }
    
     </style>
    
     <script>
    
       export default {
    
         data() {
    
           let self = this;
    
           return {
    
             events: {
    
               click(e) {
    
                 let {lng, lat} = e.lnglat;
    
                 self.lng = lng;
    
                 self.lat = lat;
    
                 var geocoder = new AMap.Geocoder({
    
                   radius: 1000,
    
                   extensions: "all"
    
                 });
    
                 geocoder.getAddress([lng, lat], function (status, result) {
    
                   if (status === 'complete' && result.info === 'OK') {
    
                     if (result && result.regeocode) {
    
                       self.address = result.regeocode.formattedAddress;
    
                       self.$nextTick();
    
                     }
    
                   }
    
                 });
    
               }
    
             },
    
             searchOption: {
    
               city: '上海',
    
               citylimit: true
    
             },
    
             zoom: 15,
    
             center: [121.5273285, 31.21515000],
    
             circle: {
    
               clickable: true,
    
               center: [113.36114, 22.31889],
    
               radius: 200,
    
               fillOpacity: 0.3,
    
               strokeStyle: 'dashed',
    
               fillColor: '#FFFF00',
    
               strokeColor: '#00BFFF',
    
               loaded: false,
    
             },
    
             lng: 0,
    
             lat: 0,
    
             address: '',
    
             marker: {
    
               position: [113.36114, 22.31889],
    
               events: {
    
                 click: () => {
    
                   if (this.mywindow.visible === true) {
    
                     this.mywindow.visible = false
    
                   } else {
    
                     this.mywindow.visible = true
    
                   }
    
                 },
    
                 dragend: (e) => {
    
                   this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
    
                 }
    
               },
    
               visible: true,
    
               draggable: false
    
             },
    
             mywindow: {
    
               position: [113.36114, 22.31889],
    
               content: '<h4>该点数据信息</h4><div class="text item">Information A: ...</div><div class="text item">Information B: ...</div>',
    
               visible: true,
    
               events: {
    
                 close() {
    
                   this.mywindow.visible = false
    
                 }
    
               }
    
             },
    
             plugin: [{
    
               pName: 'Geolocation',
    
               events: {
    
                 init(o) {
    
                   // o 是高德地图定位插件实例
    
                   o.getCurrentPosition((status, result) => {
    
                     if (result && result.position) {
    
                       self.lng = result.position.lng;
    
                       self.lat = result.position.lat;
    
                       self.center = [self.lng, self.lat];
    
                       self.address = result.position.formattedAddress;
    
                       self.loaded = true;
    
                       self.$nextTick();
    
                       self.address = result.formattedAddress;
    
                       console.log(result);
    
                     }
    
                   });
    
                 }
    
               }
    
             }]
    
           };
    
         }
    
       }
    
     </script>
    
 //很多功能还未完善