百度地圖呼叫
阿新 • • 發佈：2021-09-16
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="viewport"content="initial-scale=1.0,user-scalable=no"/>
<styletype="text/css">
body,html{width:100%;height:100%;margin:0;font-size:12px;font-family:"微軟雅黑";}
#allmap{height:400px;width:800px;}
#r-result{width:100%;font-size:14px;}
</style>
<!--設定地圖ak,apikey申請的金鑰-->
<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=XXXX"></script>
<title>百度地圖</title>
</head>
<body>
<divid="allmap"></div>
</body>
</html>
<scriptsrc="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<scripttype="text/javascript">
//定義標註
varmap=newBMap.Map("allmap");
varpoint=newBMap.Point(108.945587,34.168887);
map.centerAndZoom(point,18);
varmarker=newBMap.Marker(point);//建立標註
map.addOverlay(marker);//將標註新增到地圖中
//定義標註圖示 functiontheLocation(){ varcity=document.getElementById("cityName").value; if(city!=""){ map.centerAndZoom(city,18);//用城市名設定地圖中心點，顯示比例級別 } } //滑鼠滾動縮放 map.enableScrollWheelZoom(true); vartop_left_control=newBMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT});//左上角，新增比例尺 vartop_left_navigation=newBMap.NavigationControl();//左上角，新增預設縮放平移控制元件 vartop_right_navigation=newBMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_RIGHT,type:BMAP_NAVIGATION_CONTROL_SMALL});//右上角，僅包含平移和縮放按鈕
//新增定位控制元件 vargeolocationControl=newBMap.GeolocationControl(); geolocationControl.addEventListener("locationSuccess",function(e){ //定位成功事件 varaddress=''; address+=e.addressComponent.province; address+=e.addressComponent.city; address+=e.addressComponent.district; address+=e.addressComponent.street; address+=e.addressComponent.streetNumber; alert("當前定位地址為："+address); }); geolocationControl.addEventListener("locationError",function(e){ //定位失敗事件 alert(e.message); }); //新增定位到地圖 functionaddGeolocation(){map.addControl(geolocationControl);} varmarker=newBMap.Marker(newBMap.Point(108.945587,34.168887));//建立點 map.centerAndZoom(point,18);//初始化地圖，設定中心座標點和地圖級數 varmarker=newBMap.Marker(point);//建立標註 map.addOverlay(marker);//方法addOverlay()
//資訊視窗 varopts={ width:250,//資訊視窗寬度 height:60,//資訊視窗高度 title:"<fontsize='3'color='#cc5522'>XXX文化傳播有限公司</font>"//資訊視窗標題 } varinfoWindow=newBMap.InfoWindow('地址：x'x曲西街摩登小鎮143號',opts);//建立資訊視窗物件 map.openInfoWindow(infoWindow,map.getCenter());//開啟資訊視窗 </script>
//定義標註圖示 functiontheLocation(){ varcity=document.getElementById("cityName").value; if(city!=""){ map.centerAndZoom(city,18);//用城市名設定地圖中心點，顯示比例級別 } } //滑鼠滾動縮放 map.enableScrollWheelZoom(true); vartop_left_control=newBMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT});//左上角，新增比例尺 vartop_left_navigation=newBMap.NavigationControl();//左上角，新增預設縮放平移控制元件 vartop_right_navigation=newBMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_RIGHT,type:BMAP_NAVIGATION_CONTROL_SMALL});//右上角，僅包含平移和縮放按鈕
//新增定位控制元件 vargeolocationControl=newBMap.GeolocationControl(); geolocationControl.addEventListener("locationSuccess",function(e){ //定位成功事件 varaddress=''; address+=e.addressComponent.province; address+=e.addressComponent.city; address+=e.addressComponent.district; address+=e.addressComponent.street; address+=e.addressComponent.streetNumber; alert("當前定位地址為："+address); }); geolocationControl.addEventListener("locationError",function(e){ //定位失敗事件 alert(e.message); }); //新增定位到地圖 functionaddGeolocation(){map.addControl(geolocationControl);} varmarker=newBMap.Marker(newBMap.Point(108.945587,34.168887));//建立點 map.centerAndZoom(point,18);//初始化地圖，設定中心座標點和地圖級數 varmarker=newBMap.Marker(point);//建立標註 map.addOverlay(marker);//方法addOverlay()
//資訊視窗 varopts={ width:250,//資訊視窗寬度 height:60,//資訊視窗高度 title:"<fontsize='3'color='#cc5522'>XXX文化傳播有限公司</font>"//資訊視窗標題 } varinfoWindow=newBMap.InfoWindow('地址：x'x曲西街摩登小鎮143號',opts);//建立資訊視窗物件 map.openInfoWindow(infoWindow,map.getCenter());//開啟資訊視窗 </script>