vue2.0及以上版本引高德地图，实现点坐标及多地址切换
申明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_43360935/article/details/86622186
我这个项目是基于vue3.0，引用vue-amap开发的。
有兴趣的猿友们可以去官网看API：https://elemefe.github.io/vue-amap/#/
1.安装:
npm install vue-amap --save
2.在main.js里引入：
import VueAMap from ‘vue-amap’;
然后使用（以下代码可以直接复制）
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: ‘去高德地图申请一个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’,
uiVersion: ‘1.0.11’ // 这个是引官方ui组件库的时候要用的 你不引就不要写
});
3.在你要用到的页面组件里写以下代码(DOM结构)
<el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" :style="{width:'690px',height:'490px'}"> <el-amap-marker vid="component-marker" :position="componentMarker.position" :content-render="componentMarker.contentRender" ></el-amap-marker>
<el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker>
</el-amap>
<div class="message animated fadeInRight">
<ul>
<li class="active" v-on:click="changePosition">
<p>地址1</p>
</li>
<li v-on:click="chnageDraggle">
<p>地址2</p>
</li>
<li v-on:click="addMarker">
<p>地址3</p>
</li>
<li v-on:click="removeMarker">
<p>地址4</p>
</li>
</ul>
</div>
备注： 样式自己可以根据自己的需求设置
4.在js中写入以下代码，（这里有的代码是可以删除的，一些不用的就可以删除，减少代码冗余）：
module.exports = { name: 'amap-page',
data() {
return {
count: 1,
slotStyle: {
padding: '2px 8px',
background: '#eee',
color: '#333',
border: '1px solid #aaa'
},
zoom: 14,
center: [121.5273285, 31.21515044], //中心点的坐标
markers: [
{
position: [121.5273285, 31.21515044], //定位的坐标
events: {
click: () => {
alert('click marker');
},
dragend: (e) => {
console.log('---event---: dragend')
this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
}
},
visible: true,
draggable: false,
template: '<span>1</span>',
}
],
renderMarker: {
position: [121.5273285, 31.21715058],
contentRender: (h, instance) => {
return h(
'div', //这些都可以删除不要
{
style: {background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'},
on: {
click: () => {
const position = this.renderMarker.position;
this.renderMarker.position = [position[0] + 0.002, position[1] - 0.002];
}
}
},
['marker inner text']
)
}
},
componentMarker: {
position: [121.5273285, 31.21315058],//这些我也不知道是啥，不用的可以删除
contentRender: (h, instance) => h(exampleComponents,{style: {backgroundColor: '#fff'}, props: {text: 'father is here'}}, ['xxxxxxx'])
},
slotMarker: {
position: [121.5073285, 31.21715058]
}
};
},
methods: {
onClick() {
this.count += 1;
},
changePosition() {
this.markers[0].position = [103.695081, 36.531658];
this.center = [103.695081,36.531658];
},
}
};
//以下是点击切换地图的方法
//如果你只知道地址不知道地址的经纬度的话，可以去https://lbs.amap.com/console/show/picker 这个网址查
methods:{
onClick(){
this.count += 1;
},
changePosition() {
this.markers[0].position = [地址1的坐标];
this.center = [地址1的坐标];
},
chnageDraggle(){
this.markers[0].position = [地址2的坐标];
this.center = [地址2的坐标];
},
addMarker(){
this.markers[0].position = [地址3的坐标];
this.center = [地址3的坐标];
},
removeMarker(){
this.markers[0].position = [地址4的坐标];
this.center = [地址4的坐标];
}
},
5.css样式
样式可以根据自己的需求写，引入的地图一定要给高，不然不出来
6.效果展示如下
点击右边的地址 则会切换到相应的地图。
以上 就是完整的点坐标定位和多地址切换，感谢支持！多多指教。
以上是 vue2.0及以上版本引高德地图，实现点坐标及多地址切换 的全部内容， 来源链接： utcz.com/z/375665.html
