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,