功能点
1.支持模糊搜索
2.点击地图即选中打标记
3.编辑时根据经纬度反显
二、实现步骤
1.创建应用,获取百度地图密钥(AK)
http://lbsyun.baidu.com/apiconsole/key?application=key#/home
2.在项目的html文件中引入
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=获取到的AK"></script>
3.地图具体实现代码
<div id="allMap">
<div id="r-result" style="padding: 10px 5px;">
<span><span style="color:rgba(0, 0, 0, 0.85);">搜索<span style="margin:0 2px">:</span> </span>
<span style="margin-left:5px">
<input type="text" id="suggestId" value="" size="25" style="width:350px;height: 32px;line-height: 15px;padding: 4px 11px;font-size: 12px;border: 1px solid #E8E8E8;border-radius: 4px;"/></span>
</span>
<div style="padding-top:10px"><span>已选择地址:{{place}} </span>
<a-button style="float:right;margin-right:50px;width:60px;height:20px;line-height:10px" @click="clearSelect" type="primary">清除</a-button>
</div>
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;z-index:99999"></div>
<div id="bookingMap"></div>
</div>
地图api文档:http://lbsyun.baidu.com/jsdemo.htm#yLngLatLocation
具体实现的业务逻辑
let map;
export default {
data() {
return {
top: 0,
place: ''
}
},
mounted() {
//初始化地图前先将scrollTop设置为0,否则会出现放大/缩小位置偏移
this.mapOpen()
this.initMap()
},
beforeDestroy() {
map = null
//关闭地图前将scrollTop设置为原始值
this.mapClose()
},
methods: {
initMap() {
//实例化地图
map = new BMap.Map("bookingMap");
//设置地图中心点坐标,比例大小
var point = new BMap.Point(116.331398, 39.897445);
map.centerAndZoom(point, 12);
//启用滚轮放大缩小,默认禁用
map.enableScrollWheelZoom();
//启用地图拖拽事件,默认启用
map.enableInertialDragging();
//启用地图缩放,默认禁用
map.enableContinuousZoom();
//默认手型改为十字星
map.setDefaultCursor("crosshair");
//定位
this.getPlace()
//添加地图控制器
this.addControl()
//添加监听
this.addListener()
},
addControl() {
// 地图缩放控件
const topLeftControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT })
// 城市选择控件
const size = new BMap.Size(10, 20);
const cityListControl = new BMap.CityListControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, offset: size })
// 比例尺控件
const topLeftNavigation = new BMap.NavigationControl()
map.addControl(topLeftControl)
map.addControl(topLeftNavigation)
map.addControl(cityListControl)
},
addListener() {
let _this = this
// 百度地图API功能
function G(id) {
return document.getElementById(id);
}
var geoc = new BMap.Geocoder();
//点击监听,获得点击地址
map.addEventListener("click", function (e) {
_this.addMarker(e.point);
geoc.getLocation(e.point, function (rs) {
var addComp = rs.addressComponents;
var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
_this.place = address
_this.$emit('submit', {...e.point,place:_this.place}) //直接地图选择
});
});
//输入监听
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input": "suggestId"
, "location": map
});
ac.addEventListener("onhighlight", function (e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
_this.initMap()
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
_this.place = myValue
setPlace();
});
function setPlace() {
map.clearOverlays(); //清除地图上所有覆盖物
function myFun() {
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
_this.$emit('submit', {...pp,place:_this.place}) //搜索--选择
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加标注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
},
addMarker(point) {
console.log(point, 'wj')
var marker = new BMap.Marker(point);
map.clearOverlays();
map.addOverlay(marker);
},
//初时定位
getPlace() {
let _this = this
function myFun(result) {
var cityName = result.name;
map.setCenter(cityName);
if (!cityName) {
_this.place = cityName
}
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
},
mapOpen() {
this.top = this.getScrollTop()
if (this.top) {
this.setScrollTop(0)
}
},
mapClose() {
this.setScrollTop(this.top);
this.top = 0;
},
getScrollTop() {
let scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
},
setScrollTop(top) {
if (!isNaN(top)) {
if (document.documentElement && document.documentElement.scrollTop !== undefined) {
document.documentElement.scrollTop = top;
} else if (document.body) {
document.body.scrollTop = top;
}
}
},
clearSelect() {
this.place = ''
this.initMap()
},
// 用经纬度设置地图中心点(反显时调用)
theLocation(point) {
let _this = this
let map = new BMap.Map("bookingMap");
map.clearOverlays();
let new_point = new BMap.Point(point.lng, point.lat);
// let new_point = new BMap.Point(116.281037,40.054213);
map.centerAndZoom(new_point, 19) //重新定位
let geoc = new BMap.Geocoder();
//根据经纬度获得详细地址
geoc.getLocation(new_point, function (rs) {
var addComp = rs.addressComponents;
var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
_this.place = address
});
let marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
}
}
}
样式
.map {
width: 400px;
height: 300px;
}
#allMap {
width: 100%;
height: 100%;
}
#bookingMap {
width: 100%;
height: 92%;
}
#r-result {
width: 100%;
}
input:focus {
border-color: #40a9ff !important;
border-right-width: 1px !important;
outline: 0 !important;
-webkit-box-shadow: 0 0 0 2px rgb(24 144 255 / 20%) !important;
box-shadow: 0 0 0 2px rgb(24 144 255 / 20%) !important;
}