JavaScript調用百度地圖

在網站開發過程當中，常常會調用到地圖，百度地圖提供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=\"公交\" onclick=\"gotobaidu(1)\" />";
        licontent += "<input class=\"outset-but\" type =\"button\" value=\"駕車\"  onclick=\"gotobaidu(2)\"/>";
        licontent += "<a class=\"gotob\" ";
        licontent += "href =\"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=\"" + '北京' + "\" name=\"region\" />";
        hiddeninput += "<input type=\"hidden\" value=\"html\" name=\"output\" />";
        hiddeninput += "<input type=\"hidden\" value=\"driving\" name=\"mode\" />";
        hiddeninput += "<input type=\"hidden\" value=\"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！