在網站開發程序中，經常會呼叫到地圖，百度地圖提供Web開發、Android開發、iOS開發API及SDK，百度地圖JavaScript API可幫助您在網站中構建功能豐富、互動性強的地圖應用，本篇博客簡單介紹如何使用百度地圖提供的JavaScript API呼叫百度地圖，
百度地圖開放平臺地址：http://lbsyun.baidu.com/index.php?title=jspopular3.0
獲取服務密鑰
根據提示步驟操作，獲取服務密鑰
參考百度地圖API檔案
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密鑰"></script>
添加meta標簽適應移動端
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
JavaScript API制作動態地圖
<script type="text/javascript">
$(function () {
var map = new BMap.Map("container");//創建地圖實體
var point = new BMap.Point(116.403884, 39.914887);//設定中心點坐標
map.centerAndZoom(point, 13);//地圖初始化，同時設定地圖展示級別
map.enableScrollWheelZoom(true);//開啟滑鼠滾輪縮放
map.addControl(new BMap.NavigationControl());//添加平移縮放控制元件
map.addControl(new BMap.ScaleControl());//添加比例尺
map.addControl(new BMap.OverviewMapControl());//添加縮略地圖
map.addControl(new BMap.MapTypeControl());//添加地圖型別
var marker = new BMap.Marker(point); // 創建標注
map.addOverlay(marker);// 將標注添加到地圖中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //標注跳動的影片
})
</script>
創建資訊視窗，使用URL API調起PC端百度地圖，提供公交、駕車換乘檢索服務
<script type="text/javascript">
$(function () {
//添加帶檢索功能的資訊視窗
var licontent = "<b>天安門</b><br><br>";
licontent += "<span><strong>地址：</strong>北京市東城區天安門廣場北側</span><br><br>";
licontent += "<span><strong>電話：</strong>(010)63095718,(010)63095630</span><br><br>";
licontent += "<span class=\"input\"><strong></strong>";
licontent += "<input class=\"outset\" type =\"text\" name=\"origin\" />";
licontent += "<input class=\"outset-but\" type =\"button\" value=https://www.cnblogs.com/"公交\" onclick=\"gotobaidu(1)\" />";
licontent += "<input class=\"outset-but\" type =\"button\" value=https://www.cnblogs.com/"駕車\" onclick=\"gotobaidu(2)\"/>";
licontent += "<a class=\"gotob\" ";
licontent += "href =https://www.cnblogs.com/"http://api.map.baidu.com/direction?destination=latlng:" + marker.getPosition().lat + "";
licontent += "," + marker.getPosition().lng + "|name:天安門" + "?ion=北京" + "&output=html\" ";
licontent += "target=\"_blank\"></a></span>";
var hiddeninput = "<input type=\"hidden\" value=https://www.cnblogs.com/"" + '北京' + "\" name=\"region\" />";
hiddeninput += "<input type=\"hidden\" value=https://www.cnblogs.com/"html\" name=\"output\" />";
hiddeninput += "<input type=\"hidden\" value=https://www.cnblogs.com/"driving\" name=\"mode\" />";
hiddeninput += "<input type=\"hidden\" value=https://www.cnblogs.com/"latlng:" + marker.getPosition().lat + "";
hiddeninput += "," + marker.getPosition().lng + "|name:天安門" + "\" name=\"destination\" />";
var content1 = "<form id=\"gotobaiduform\" action=\"http://api.map.baidu.com/direction\" ";
content1 += "target=\"_blank\" method=\"get\">" + licontent + hiddeninput + "</form>";
var opts1 = { width: 300 };
//創建資訊窗實體
var infoWindow = new BMap.InfoWindow(content1, opts1);
//打開資訊窗
marker.openInfoWindow(infoWindow);
marker.addEventListener('click', function () {
marker.openInfoWindow(infoWindow);
});
})
function gotobaidu(type) {
if ($.trim($("input[name=origin]").val()) == "") {
alert("請輸入起點！");
return;
} else {
if (type == 1) {
$("input[name=mode]").val("transit");
$("#gotobaiduform")[0].submit();
} else if (type == 2) {
$("input[name=mode]").val("driving");
$("#gotobaiduform")[0].submit();
}
}
}
</script>
官方示例地址：http://lbsyun.baidu.com/index.php?title=uri/guide/helloworld
常見問題
This request has been blocked; the content must be served over HTTPS.
Console提示：此請求已被阻止，內容必須通過HTTPS提供，
解決方法：添加meta標簽，將HTTP的不安全請求升級為HTTPS
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
更多常見問題請見官方檔案：http://lbsyun.baidu.com/index.php?title=jspopular3.0/qa
End！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/169441.html
標籤：JavaScript