javascript 百度地圖API - demo

時間 2019-12-01
標籤 javascript 百度地圖 api demo 欄目 JavaScript 简体版
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html {
    height: 100%
}

body {
    height: 100%;
    margin: 0px;
    padding: 0px
}

#container {
    height: 100%
}
</style>
<script type="text/javascript"    src="http://api.map.baidu.com/api?v=2.0&ak=xxx">
</script>
</head>
<body>
    <div id="container" style="width: 420px; height: 340px; border: 1px solid gray; float: left;"></div>
    <p> 
                緯度：<input name="lng" type="text" id="lng" style="width:200px;" value="120.570464"/>  
                經度：<input name="lat" type="text" id="lat" style="width:200px;" value="31.300216"/>  
                標註點所在區域：<input name="address" type="text" id="address" style="width:200px;"/>  
    </p>  
    <script type="text/javascript">
        // http://lbsyun.baidu.com/jsdemo.htm#a1_2
        
        var map = null;
        var initialFunc = function(){
            map = new BMap.Map("container"); // 建立地圖實例  
            var point = new BMap.Point(116.404, 39.915); // 建立點座標  
            map.centerAndZoom(point, 15); // 初始化地圖，設置中心點座標和地圖級別
            
            map.addControl(new BMap.NavigationControl());    
            map.addControl(new BMap.ScaleControl());    
            map.addControl(new BMap.OverviewMapControl()); 
            
            map.addControl(new BMap.MapTypeControl());    
            map.setCurrentCity("北京"); // 僅當設置城市信息時，MapTypeControl的切換功能才能可用
        
            // 自定義控件
            map.addControl(new myTest.ZoomControlX()); 
            
            map.addEventListener("click", function(e){  
                console.log(e.point.lng + ", " + e.point.lat);  
                console.log("您點擊了地圖。");    
            });
            
            // 拖動地圖後地圖中心的經緯度信息
            map.addEventListener("dragend", function(){    
                 var center = map.getCenter();    
                 console.log("地圖中心點變動爲：" + center.lng + ", " + center.lat);    
            });
            
            var zoomendFunc = function(){    
                 console.log("地圖縮放至：" + this.getZoom() + "級");    
                 // 移除監聽事件
                 map.removeEventListener("zoomend", zoomendFunc);
            };
            map.addEventListener("zoomend",zoomendFunc);
            
            // 標註功能：拖動、打標註
            myTest.markerTest(map);
            
            // 瀏覽器定位
            myTest.geolocation(map);
        };
        
        var myTest = {
                geolocation : function(map) {  
                    //關於狀態碼
                    //BMAP_STATUS_SUCCESS    檢索成功。對應數值「0」。
                    //BMAP_STATUS_CITY_LIST    城市列表。對應數值「1」。
                    //BMAP_STATUS_UNKNOWN_LOCATION    位置結果未知。對應數值「2」。
                    //BMAP_STATUS_UNKNOWN_ROUTE    導航結果未知。對應數值「3」。
                    //BMAP_STATUS_INVALID_KEY    非法密鑰。對應數值「4」。
                    //BMAP_STATUS_INVALID_REQUEST    非法請求。對應數值「5」。
                    //BMAP_STATUS_PERMISSION_DENIED    沒有權限。對應數值「6」。(自 1.1 新增)
                    //BMAP_STATUS_SERVICE_UNAVAILABLE    服務不可用。對應數值「7」。(自 1.1 新增)
                    //BMAP_STATUS_TIMEOUT    超時。對應數值「8」。(自 1.1 新增)
                    var geolocation = new BMap.Geolocation();
                    geolocation.getCurrentPosition(function(r){
                        if(this.getStatus() == BMAP_STATUS_SUCCESS){
                            var mk = new BMap.Marker(r.point);
                            map.addOverlay(mk);
                            map.panTo(r.point);
                            console.log('您的位置：'+r.point.lng+','+r.point.lat);
                        }
                        else {
                            console.log('failed'+this.getStatus());
                        }        
                    },{enableHighAccuracy: true})
                },
                // 根據座標獲取地址   
                geocoder : function Geocoder(point) {  
                    var gc = new BMap.Geocoder();  
                    gc.getLocation(point, function (rs) {  
                        var addComp = rs.addressComponents;  
                        document.getElementById('address').setAttribute('value',addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);  
                    });  
                },
                markerTest : function(map){
                    //　新座標
                    map.clearOverlays(); 
                    var pointNew = new BMap.Point(116.404, 39.915);
                    var marker = new BMap.Marker(pointNew);  // 建立標註
                    map.addOverlay(marker);              // 將標註添加到地圖中
                    map.panTo(pointNew);
                    marker.enableDragging(); // 能夠拖動  
                    //建立信息窗口  
                    var infoWindow = new BMap.InfoWindow("這就是您公司的位置。<br/>若是不正確，請拖動紅色圖標");  
                    //顯示窗口  
                    marker.openInfoWindow(infoWindow);  
                    //點擊監聽  
                    marker.addEventListener("click", function () {  
                        this.openInfoWindow(infoWindow);  
                    });  
                      //拖動監聽  
                    marker.addEventListener("dragend", function (e) {  
                        //座標賦值  
                        document.getElementById('lng').setAttribute('value',e.point.lng);  
                        document.getElementById('lat').setAttribute('value',e.point.lat);  
                        myTest.geocoder(e.point);  
                    }); 
                },
                ZoomControlX : ((function(){
                    // 定義一個控件類，即function    
                    function ZoomControl(){    
                        // 設置默認停靠位置和偏移量  
                        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;    
                        this.defaultOffset = new BMap.Size(10, 10);    
                    }    
                    // 經過JavaScript的prototype屬性繼承於BMap.Control   
                    ZoomControl.prototype = new BMap.Control();
                    
                    // 自定義控件必須實現initialize方法，而且將控件的DOM元素返回   
                    // 在本方法中建立個div元素做爲控件的容器，並將其添加到地圖容器中   
                    ZoomControl.prototype.initialize = function(map){    
                        // 建立一個DOM元素   
                         var div = document.createElement("div");    
                        
                         // 添加文字說明    
                         div.appendChild(document.createTextNode("放大2級"));    
                        
                         // 設置樣式    
                         div.style.cursor = "pointer";    
                         div.style.border = "1px solid gray";    
                         div.style.backgroundColor = "white";    
                         
                         // 綁定事件，點擊一次放大兩級    
                         div.onclick = function(e){  
                             map.zoomTo(map.getZoom() + 2);    
                         }    
                         
                         // 添加DOM元素到地圖中   
                         map.getContainer().appendChild(div); 
                         
                         // 將DOM元素返回  
                         return div;    
                     }
                    return ZoomControl;
                    
                })()),
                
        };
        
        initialFunc();
    </script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。