WishMeLz

生活其实很有趣

Vue的地图插件vue-amap

https://github.com/ElemeFE/vue-amap

使用配置
npm i vue-amap

import VueAMap from 'vue-amap';
Vue.use(VueAMap);


VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'be2262deadf45267aed6f6e7rty3ba0',
  // 插件集合
  plugin: [
    "AMap.Autocomplete", //输入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角缩略图插件 比例尺
    "AMap.OverView", //地图鹰眼插件
    "AMap.ToolBar", //地图工具条
    "AMap.MapType", //类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
    "AMap.PolyEditor", //编辑 折线多,边形
    "AMap.CircleEditor", //圆形编辑器插件
    "AMap.Geolocation" //定位控件,用来获取和展示用户主机所在的经纬度位置
          ],
  // 高德 sdk 版本,默认为 1.4.4
  v: '1.4.4'
});

 <el-amap vid="amapDemo" :zoom="zoom" :center="center">
      <el-amap-marker vid="marker" :position="center" :label="label"> 
      </el-amap-marker>
</el-amap>


data中的数据:
      zoom: 16,   // 放大倍数
      center: [xxx,xx],  // 经纬度定位
      label: {
        content: "角标",   // 名字
        offset: [10, 12]    //content定位
      }

经纬度定位查询:https://lbs.amap.com/console/show/picker

加上范围

   <el-amap vid="amapDemo" :zoom="zoom" :center="center">
      <el-amap-marker vid="marker" :position="center" :label="label"></el-amap-marker>
         <el-amap-circle  vid="circle"
          :center="center" 
          :radius="radius" 
          fill-opacity="0.2"
          strokeColor="#38f"
          strokeOpacity="0.8"
          strokeWeight="1"
          fillColor="#38f"
          >
        </el-amap-circle>
    </el-amap>

data: radius:100,