搜尋

首頁  >  問答  >  主體

javascript - 關於百度地圖JS API取得經緯度的一個問題

目前有這樣一個需求: 在地圖上用滑鼠點擊確定頂點的方式劃定一個多邊形,並且將多邊形的對應的經緯度按順序寫入資料庫,這個功能需要集成到網站中。

我思路是這樣的:直接用百度地圖API展示地圖,關鍵是要獲取滑鼠所在點的經緯度(然後再蒙上一層p或者直接用添加覆蓋物API),類似這樣:http:// api.map.baidu.com/lbsa... 但這是一個產品,而我要使用的是API

目前沒有在百度地圖發現這樣的API,不知道各位朋友有沒有什麼解決方案?

PHPzPHPz2747 天前795

全部回覆(2)我來回復

  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-19 10:16:14

    剛好以前弄過一個！注意需要你自己去baidu申請一個密鑰！ 

    <!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;}
        #allmap {width: 100%; height:100%; overflow: hidden;}
    </style>
  
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=换成你的密钥"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
  
    <title>test</title>
</head>
<body> 
    <p id="allmap">    
        <p id="map" style="width:100%;height:100%;"></p>
    </p>
    <script>    
        var map = new BMap.Map('map', {enableMapClick:false});
        var poi = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(poi, 11);
        map.enableScrollWheelZoom();
        
        var styleOptions = {
            strokeColor:"red",
            fillColor:"",
            strokeWeight: 1,
            strokeOpacity: 0.8,
            fillOpacity: 0.6,
            strokeStyle: 'dashed'
        }
        
        //实例化鼠标绘制工具
        var drawingManager = new BMapLib.DrawingManager(map, {
            isOpen: false,
            enableDrawingTool: true,
            drawingToolOptions: {
                anchor: BMAP_ANCHOR_TOP_RIGHT,
                offset: new BMap.Size(5, 5),
                drawingModes :[
                    BMAP_DRAWING_RECTANGLE
                ] 
            },
            rectangleOptions: styleOptions
        });  
                
        drawingManager.addEventListener('overlaycomplete', function(e){
            var overlay = e.overlay,
                handle;
                
            handle = new BMap.Polygon(overlay.getPath(), {strokeWeight: 2, strokeColor: "#ff0000"});
            
            map.addOverlay(handle);
            alert("选取范围的基准点坐标为" + JSON.stringify(handle.getPath()));
        });
    </script>
</body>
</html>

    回覆
    0
  • 为情所困

    为情所困2017-05-19 10:16:14

    翻了下百度開放平台 http://lbsyun.baidu.com/index...

    這個不是麼？ 

    在标准的DOM事件模型中（DOM Level 2 Events），监听函数会得到一个事件对象e，在e中可以获取有关该事件的信息。同时在监听函数中this会指向触发该事件的DOM元素。 百度地图API的事件模型与此类似，在事件监听函数中传递事件对象e，每个e参数至少包含事件类型（type）和触发该事件的对象（target）。 API还保证函数内的this指向触发（同时也是绑定）事件的API对象。
例如，通过参数e得到点击的经纬度坐标。
var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("click", function(e){    
 alert(e.point.lng + ", " + e.point.lat);    
});
或者通过this得到地图缩放后的级别。
var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("zoomend", function(){    
 alert("地图缩放至：" + this.getZoom() + "级");    
});

    回覆
    0
  • 取消回覆