效果一：
地图拖动，中心定位标注不动，准确实时获取地图拖动后的中心点位置，并获取中心点位置一定区域内的十个具体位置。
解决思路：地图拖动会触发dragend事件，我们监听这个事件，并实时获取拖动后的地图的中心点位置，然后调用相关api由中心点位置来获取附近的具体位置，中心点的标注通过定位的方式固定到地图中心。
//在HTML页面
//需要两个容器，一个装地图，一个装中心点标注
<div className="map">
<div className="baiduMap" id="container" />
<div className="h5-icon-gps-address" />
</div>
//中心标注的样式
.map{
position: relative;
.baiduMap{
height: 270px;
width: 100%;
}
.h5-icon-gps-address{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-100%);
font-size: 28px;
}
}
//Webview.js百度地图获取地理位置
getCurrentPosition(){
return new Promise(function(resolve, reject){
let geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
//关于状态码
//BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
//BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
//BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
//BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
//BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
//BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
if(this.getStatus() === BMAP_STATUS_SUCCESS){
//精度为undefined 代表用户拒绝授权地理位置
if(r.accuracy === null){
reject({
type: '1', //授权失败
errorMessage: i18n.t('userRefuseRight'),
});
}
let myGeo = new BMap.Geocoder();
myGeo.getLocation(new BMap.Point(r.longitude, r.latitude), (result) => {
if(result){
resolve({
longitude: r.longitude,
latitude: r.latitude,
address: result.address,
});
}else{
reject({
type: '2', //详细地址解析失败
errorMessage: i18n.t('addressResolveFail'),
});
}
});
}else{
reject({
type: '0', //百度地图api调用出错
errorMessage: i18n.t('getPositionFail'),
});
}
}, function(err){
//没有网络的返回值
if(err.errorCode === 3){
reject({
type: '3', //超时，没有网络
errorMessage: i18n.t('positionOvertime'),
});
}else{
reject({
type: '4', //未知的错误
errorMessage: 'unknown error',
});
}
});
});
}
getMap = () => {
Webview.getCurrentPosition().then(action((position)=>{
let map = new BMap.Map('container');
let point = new BMap.Point(position.longitude, position.latitude);
map.centerAndZoom(point, 17);
this.getMovedArea(point, map);
//向地图添加控件（anchor: 位置；type：类型）
let top_right_navigation = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
type: BMAP_NAVIGATION_CONTROL_ZOOM
});
map.addControl(top_right_navigation);
map.addEventListener('dragend', ()=>{
let center = map.getCenter();
let Point = new BMap.Point(center.lng, center.lat);
this.getMovedArea(Point, map);
});
}));
}
getMovedArea = (Point, map) => {
// 创建地理编码实例
let myGeo = new BMap.Geocoder();
// 根据坐标得到地址描述
myGeo.getLocation(Point, (result)=>{
if (result){
let surroundingAddress = _.map(result.surroundingPois, 'title');
let options = {
onSearchComplete: (results)=>{
if (local.getStatus() === BMAP_STATUS_SUCCESS){
for (var i = 0; i < results.getCurrentNumPois(); i ++){
this.moveAddress.push({
title: results.getPoi(i).title,
address: results.getPoi(i).address,
point: results.getPoi(i).point,
});
}
}
}
};
let local = new BMap.LocalSearch(map, options);
local.searchNearby(surroundingAddress[0] || result.address, Point, 3000);
}
});
}
效果二：
根据关键字搜索具体地址的功能，不需要在地图上显示。
解决思路：我们需要利用百度地图的关键字搜索功能，我们给input 框注册onChange事件，来实时获取用户输入的字符，将字符作为关键字传给search方法中。
//HTML中写一个输入框
<input type="text"
placeholder={i18n.t('authorization.pleaseSearch')}
value={store.searchAddressKey}
onChange={store.handleChange} />
@action
handleChange = (e) => {
this.searchAddressKey = e.target.value;
let point = new BMap.Point(gpsMapStore.longitude, gpsMapStore.latitude);
let options = {
onSearchComplete: action((results)=>{
this.searchedAddressList = [];
if (local.getStatus() === BMAP_STATUS_SUCCESS){
for (var i = 0; i < results.getCurrentNumPois(); i ++){
this.searchedAddressList.push({
title: results.getPoi(i).title,
address: results.getPoi(i).address,
point: results.getPoi(i).point,
});
}
if(!this.searchAddressKey){
this.searchedAddressList = [];
}
}
})
};
let local = new BMap.LocalSearch(point, options);
local.search(e.target.value);
}
网友评论