dome代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地圖dome</title>
<!-- baidu map -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>
</head>
<body>
<div id = "allmap"></div>
</body>
</html>
<script type="text/javascript">
var geolocation = new BMap.Geolocation();
var userData = https://www.cnblogs.com/smileZAZ/p/{};
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
mk = new BMap.Marker(r.point);
getAddress(r.point);
}else {
alert('failed'+this.getStatus());
}
});
//獲取地址資訊，設定地址label
function getAddress(point){
var gc = new BMap.Geocoder();
gc.getLocation(point, function(res){
console.log(res);
//百度地圖API功能
map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(res.point.lng,res.point.lat),30);//根據坐標初始化地圖
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl()); //平移縮放控制元件
map.addControl(new BMap.ScaleControl()); //比例尺
map.addControl(new BMap.OverviewMapControl()); //縮略地圖
map.addControl(new BMap.MapTypeControl()); //地圖型別
map.setCurrentCity(res.addressComponents.city); // 僅當設定城市資訊時，MapTypeControl的切換功能才能可用
//添加標注
var marker = new BMap.Marker(new BMap.Point(res.point.lng,res.point.lat)); // 創建標注
map.addOverlay(marker); // 將標注添加到地圖中
marker.addEventListener('click', mapClickFun);
for(var i=0;i<res.surroundingPois.length;i++){
var marker = new BMap.Marker(new BMap.Point(res.surroundingPois[i].point.lng,res.surroundingPois[i].point.lat)); // 創建標注
marker.data = https://www.cnblogs.com/smileZAZ/p/res.surroundingPois[i];
map.addOverlay(marker); // 將標注添加到地圖中
marker.addEventListener('click', (e)=>{
console.log(this);
mapClickFun(e,marker.data);
});
}
});
}
function mapClickFun(e,data){
// 通過點擊的坐標創建一個點物件，添加標簽
console.log(e);
console.log(data);
var point = new BMap.Point(e.point.lng, e.point.lat);
var opts = {
title: "店鋪詳情：",
enableMessage: false,
}
if(data =https://www.cnblogs.com/smileZAZ/p/= undefined){
opts.title ="本機地址"
var infowindow = new BMap.InfoWindow("經度：" + e.point.lng + "<br/>緯度" + e.point.lat, opts);
map.openInfoWindow(infowindow, point);
}else{
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/205868.html
標籤：JavaScript
下一篇：DOM節點操作