百度地圖坐標定位和周邊環境查找例子

本文轉載自查看原文 2012-03-28 11:16 13304 javascript技術/ JQuery

百度API接口 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></script>

地圖面板：

< div class ="mapBox" id ="mapDiv" >

</div>
                    <div class="periphery">
                        <div class="peripheryBd">
                            <h4>
                                周邊查找：</h4>
                            <ul class="checkTag" id="hulMapCheckTag">
                                <li>
                                    <input name="gongjiao" id="ck_bus" type="checkbox" value="公交" /><label for="ck_bus">公交</label></li>
                                <li>
                                    <input name="ditie" id="ck_subway" type="checkbox" value="地鐵" /><label for="ck_subway">地鐵</label></li>
                                <li>
                                    <input name="house" id="ck_school" type="checkbox" value="學校" /><label for="ck_school">學校</label></li>
                                <li>
                                    <input name="yiyuan" id="ck_hospital" type="checkbox" value="醫院" /><label for="ck_hospital">醫院</label></li>
                                <li>
                                    <input name="yinhang" id="ck_bank" type="checkbox" value="銀行" /><label for="ck_bank">銀行</label></li>
                                <li>
                                    <input name="shop" id="ck_shop" type="checkbox" value="商場" /><label for="ck_shop">商場</label></li>
                            </ul>
                            <div class="peripheryBg">
                            </div>
                            <a class="closePer"><span>關閉</span></a>
                        </div>
                    </div>

JS代碼：

})

// 百度地圖
function ShowMap() {
     var lat = $("#htbLat").attr("value");
     var lng = $("#htbLng").attr("value");
    map.centerAndZoom( new BMap.Point(lng, lat), 16);
     // 只需要放大和縮小
    map.addControl( new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_ZOOM }));
     // map.enableScrollWheelZoom();
    local = new BMap.LocalSearch(map, { onSearchComplete: searchComplete });      // 構造一個查詢
     var point = new BMap.Point(lng, lat);
     var mk = new BMap.Marker(point);
    map.addOverlay(mk);
}

// 查詢完畢添加自定義標注
function addMarker(results, point, index) {
     var cantingIcon = new BMap.Icon("/Images/canting.png", new BMap.Size(17, 16));
     var ditieIcon = new BMap.Icon("/Images/ditie.png", new BMap.Size(17, 16));
     var shopIcon = new BMap.Icon("/Images/shop.png", new BMap.Size(17, 16));
     var yinhangIcon = new BMap.Icon("/Images/yinhang.png", new BMap.Size(17, 16));
     var yiyuanIcon = new BMap.Icon("/Images/yiyuan.png", new BMap.Size(17, 16));
     var houseIcon = new BMap.Icon("/Images/house.png", new BMap.Size(17, 16));
     var gongjiaoIcon = new BMap.Icon("/Images/gongjiao.png", new BMap.Size(17, 16));
     var myIcons = "";
     if (results.keyword == "學校") {
        myIcons = houseIcon;
    } else if (results.keyword == "餐廳") {
        myIcons = cantingIcon;
    } else if (results.keyword == "商場") {
        myIcons = shopIcon;
    } else if (results.keyword == "銀行") {
        myIcons = yinhangIcon;
    }
     else if (results.keyword == "醫院") {
        myIcons = yiyuanIcon;
    }
     else if (results.keyword == "地鐵") {
        myIcons = ditieIcon;
    }
     else if (results.keyword == "公交") {
        myIcons = gongjiaoIcon;
    }
     else {
        myIcons = houseIcon;
    }

     var marker = new BMap.Marker(point.point, { icon: myIcons });

     var infoWindow = new BMap.InfoWindow(point.title);   // 創建信息窗口對象
    marker.addEventListener("mouseover",
             function () {
                marker.openInfoWindow(infoWindow);
            });
    map.addOverlay(marker);
}

// 查詢完畢的回調函數
var searchComplete = function (results) {
     if (local.getStatus() != BMAP_STATUS_SUCCESS) {
         return;
    }
     // 移除覆蓋物
//map.clearOverlays();
// var lat = $("#htbLat").attr("value");
// var lng = $("#htbLng").attr("value");
// var point = new BMap.Point(lng, lat);
// var mk = new BMap.Marker(point);
//map.addOverlay(mk);
     for ( var cnt = 0; cnt < results.getCurrentNumPois(); cnt++) {
         var point = results.getPoi(cnt);
        addMarker(results, point, cnt);
    }

}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue結合百度地圖Api實現周邊配置查詢及根據篩選結果顯示對應坐標詳情 C#的百度地圖開發(三)依據坐標獲取位置、商圈及周邊信息根據指定坐標在百度地圖上定位展示關於百度地圖中坐標轉換定位不准問題百度地圖api-查詢周邊 Android 百度地圖-實現POI的搜索(搜索周邊) GPS定位為什么要轉換處理？高德地圖和百度地圖坐標處理有什么不一樣？百度地圖API：使用百度定位百度地圖接口使用例子百度地圖api 常用例子