百度地图获取当前定位并进行标注,使所有定位点在视野范围内
//获取当前位置
let geolocation = new BMap.Geolocation();
// 开启SDK辅助定位
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() === BMAP_STATUS_SUCCESS){
//获取经纬度
console.log('您的位置:' + r.point.lng + ',' + r.point.lat);
//------标记当前位置
// 默认标注
let mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
// 自定义标注
let ridImg= new BMap.Icon(ridIcon, new BMap.Size(40, 'auto'));
let pt1 = new BMap.Point(104.55263,39.6565);
let ridMarker = new BMap.Marker(pt1, {icon: ridImg});
map.addOverlay(ridMarker);
let shopImg= new BMap.Icon(shopIcon, new BMap.Size(40, 'auto'));
let pt2 = new BMap.Point(108.55263,38.6565);
let shopMarker = new BMap.Marker(pt2, {icon: shopImg});
//给地图添加标注
map.addOverlay(ridMarker);
map.addOverlay(shopMarker);
//调整地图合适的大小,使所有标注都在视野范围内可见
map.setViewport([mk,pt1,pt2])
// ------地址逆解析
//创建地理编码实例
let myGeo = new BMap.Geocoder();
// 根据坐标得到地址描述
myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat),function(result{
if (result){
let city = result.address
}
//---end
}else{
console.log('定位错误')
}
});
高德地图获取当前定位并进行标注,使所有定位点在视野范围内
AMap.plugin('AMap.Geolocation', function() {
let geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
maximumAge: 0, //定位结果缓存0毫秒,默认:0
convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
showButton: true, //显示定位按钮,默认:true
buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
})
geolocation.getCurrentPosition(function(status,result){
if(status == 'complete'){
onComplete(result)
}else{
onError(result)
}
}
)
function onComplete(data) {
// data是具体的定位信息
console.log('lng',data.position.lng,'lat',data.position.lat)
//定位标记
let position = new AMap.LngLat(data.position.lng,data.position.lat);
let markerContent = `` +
`<div class="marker">` +
`<img src=${mark}>`+
`</div>`;
let marker = new AMap.Marker({
position: position,
content: markerContent,
});
map.add(marker);
let list=[{longitude:118.252,latitude:39.336},
{longitude:118.252,latitude:39.336},
{longitude:118.252,latitude:39.336}]
let allPoints = []
list.map((item,index)=>{
let position = new AMap.LngLat(item.longitude,item.latitude);
// 点标记显示内容,HTML要素字符串
let markerContent = `` +
`<div class="custom-content-marker">` +
`<img src=${locationImg}>` +
`<span class="close-btn">${index+1}</span>` +
`</div>`;
let marker = new AMap.Marker({
position: position,
content: markerContent,
});
map.add(marker);
allPoints.push(marker)
})
//使所有标记点在视野范围内可见
map.setFitView(_self.allPoints)
// 地址逆解析
const geocoder = new AMap.Geocoder({
city: 'city', // replace with your city
});
const lnglat = [data.position.lng, data.position.lat];
geocoder.getAddress(lnglat, (status, result) => {
if (status === 'complete' && result.regeocode) {
let city = result.regeocode.formattedAddress;
console.log(city)
}
});
}
function onError(data) {
console.log('定位出错')
}
})