javascript - 关于百度地图JS API获取经纬度的一个问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 关于百度地图JS API获取经纬度的一个问题

PHPz 2017-05-19 10:14:14

[JavaScript讨论组]

1059

目前有这样一个需求: 在地图上用鼠标点击确定顶点的方式划定一个多边形,并且将多边形的对应的经纬度按顺序写入数据库,这个功能需要集成到网站中。

我思路是这样的:直接用百度地图API展示地图,关键是要获取鼠标所在点的经纬度(然后再蒙上一层p或者直接用添加覆盖物API),类似这样:http://api.map.baidu.com/lbsa... 但是这是一个产品,而我要使用的是API

目前没有在百度地图发现这样的API,不知道各位朋友有没有什么解决方案?

PHPz

学习是最好的投资！

全部回复(2)

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

刚好以前弄过一个！注意需要你自己去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 1楼

翻了下百度开放平台 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

添加回复

专题推荐

更多>

热门话题

热门教程

更多>