实现地图拖拽选址功能，百度地图并未像高德地图拖拽选址功能 。由于项目需要，在百度地图的基础上实现简单的拖拽功能。大神掠过～～
MapDemo下载
实现思路
1. 获取地图的中点经纬度。
2. 获取地图拖拽回调事件。
3. 将大头针图片底部固定在地图的正中央。
引用百度地图sdk
在index.html中引用
<script type="text/javascript" src="//api.map.baidu.com/api?ak=GbhBTuY8EQf5N8iy8Nklz651Gg6l6W1N&type=lite&v=1.0"></script>
组件中实现地图
map 是地图；
center-point 是打头针；
point 是标示地图中点位置；
代码如下：
<template>
<div class="map-wrap">
<div id="map"></div>
<div class="center-point"></div>
<div class="point"></div>
</div>
</template>
<script>
export default {
data(){
return{}
},
mounted(){
this.mapCenter();
},
methods: {
mapCenter(){
// 百度地图API功能
var map = new BMap.Map("map");
var point = new BMap.Point(114.025973657,22.5460535462);
map.centerAndZoom(point, 14);
map.addEventListener("dragend",attribute);
function attribute() {
console.log(map.centerPoint);
// alert("地图中点的位置是" + map.centerPoint.lng + "," + map.centerPoint.lat);
}
},
}
}
</script>
<style scoped>
.map-wrap{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#map{
width: 100%;
height: 100%;
position: relative;
}
.center-point{
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 0;
margin: 0 auto;
margin-top: -50px;
width: 40px;
height: 50px;
background: url("../../assets/logo-2.png") center no-repeat;
background-size: contain;
}
.point{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
}
</style>
大神略过~~, 如有问题，欢迎讨论
