let map = new BMapGL.Map("map"),
geolocation = new BMapGL.Geolocation(), // 定位类
center = new BMapGL.Point(116.280190, 40.049191), // 位置类
geocoder = new BMapGL.Geocoder(); // 地址解析类
map.addOverlay(center); // 增加覆盖物
map.centerAndZoom(center, 10); // 中心点坐标和缩放级别
map.enableScrollWheelZoom(true); // 开启滚轮缩放
map.setHeading(64.5); //设置地图旋转角度
map.setTilt(73); //设置地图的倾斜角度
/* 获取用户当前位置 */
geolocation.getCurrentPosition(function (res) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// 创建自定义覆盖物 定位icon
const customOverlay = new BMapGL.CustomOverlay(createDOM, {
point: res.point, opacity: 0.5, map, offsetX: 25,
properties: { title: '大润发(石桥店)', address: "地址:浙江省杭州市拱墅区石桥路399号" }
});
// 将自定义覆盖物添加到地图上
map.addOverlay(customOverlay);
map.panTo(res.point);
// 定位icon 绑定鼠标事件
customOverlay.addEventListener('click', function (e) {
map.openInfoWindow(new BMapGL.InfoWindow(e.target.properties.address, { width: 323, height: 70, title: e.target.properties.title }), res.point);
});
map.openInfoWindow(new BMapGL.InfoWindow("地址:浙江省杭州市拱墅区石桥路399号", { width: 323, height: 70, title: '大润发(石桥店)' }), res.point);
} else {
alert('当前位置获取失败,错误状态码:' + this.getStatus());
}
isLoading.value = false;
});
百度地图api的使用
于 2023-07-07 10:04:53 首次发布