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 >

//很多功能还未完善

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue