效果一：
地圖拖動，中心定位標(biāo)注不動，準(zhǔn)確實時獲取地圖拖動后的中心點位置，并獲取中心點位置一定區(qū)域內(nèi)的十個具體位置。
解決思路：地圖拖動會觸發(fā)dragend事件，我們監(jiān)聽這個事件，并實時獲取拖動后的地圖的中心點位置，然后調(diào)用相關(guān)api由中心點位置來獲取附近的具體位置，中心點的標(biāo)注通過定位的方式固定到地圖中心。
//在HTML頁面
//需要兩個容器，一個裝地圖，一個裝中心點標(biāo)注
<div className="map">
<div className="baiduMap" id="container" />
<div className="h5-icon-gps-address" />
</div>
//中心標(biāo)注的樣式
.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){
//關(guān)于狀態(tài)碼
//BMAP_STATUS_SUCCESS 檢索成功。對應(yīng)數(shù)值“0”。
//BMAP_STATUS_CITY_LIST 城市列表。對應(yīng)數(shù)值“1”。
//BMAP_STATUS_UNKNOWN_LOCATION 位置結(jié)果未知。對應(yīng)數(shù)值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 導(dǎo)航結(jié)果未知。對應(yīng)數(shù)值“3”。
//BMAP_STATUS_INVALID_KEY 非法密鑰。對應(yīng)數(shù)值“4”。
//BMAP_STATUS_INVALID_REQUEST 非法請求。對應(yīng)數(shù)值“5”。
//BMAP_STATUS_PERMISSION_DENIED 沒有權(quán)限。對應(yīng)數(shù)值“6”。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服務(wù)不可用。對應(yīng)數(shù)值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超時。對應(yīng)數(shù)值“8”。(自 1.1 新增)
if(this.getStatus() === BMAP_STATUS_SUCCESS){
//精度為undefined 代表用戶拒絕授權(quán)地理位置
if(r.accuracy === null){
reject({
type: '1', //授權(quán)失敗
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調(diào)用出錯
errorMessage: i18n.t('getPositionFail'),
});
}
}, function(err){
//沒有網(wǎng)絡(luò)的返回值
if(err.errorCode === 3){
reject({
type: '3', //超時，沒有網(wǎng)絡(luò)
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) => {
// 創(chuàng)建地理編碼實例
let myGeo = new BMap.Geocoder();
// 根據(jù)坐標(biāo)得到地址描述
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);
}
});
}
效果二：
根據(jù)關(guān)鍵字搜索具體地址的功能，不需要在地圖上顯示。
解決思路：我們需要利用百度地圖的關(guān)鍵字搜索功能，我們給input 框注冊onChange事件，來實時獲取用戶輸入的字符，將字符作為關(guān)鍵字傳給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);
}
