最近开启新的项目:要求对接高德地图,并在Vue的基础上。
通过在网上查找,发现了还可以的组件:vue-amap。在这附上官方文档一份
下载vue-amap
npm install vue-amap --save
引入vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'your amap 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'
});
在这里,你需要在高德开发平台上注册自己应用程序并且生成KEY
而在plugin中写入你要用到的方法,这里只是一部分,AMap.Geolocatio/*获取当前定位*/、AMap.LngLat/*将数组转化为定位数据*/、AMap.Geocoder/*逆地理编码*/···
这里就不一一列举了,后边我会说一下我用到的一些写法以及坑。
写法:
<el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo">
</el-amap>
vid:地图容器节点的ID
center:地图中心坐标值
zoom:地图放大倍数
events:地图上绑定的事件
将上边的参数配置好之后你就可以看到一个地图了。