目前有这样一个需求: 在地图上用鼠标点击确定顶点的方式划定一个多边形,并且将多边形的对应的经纬度按顺序写入数据库,这个功能需要集成到网站中。
我思路是这样的:直接用百度地图API展示地图,关键是要获取鼠标所在点的经纬度(然后再蒙上一层p或者直接用添加覆盖物API),类似这样:http://api.map.baidu.com/lbsa... 但是这是一个产品,而我要使用的是API
目前没有在百度地图发现这样的API,不知道各位朋友有没有什么解决方案?
学习是最好的投资！
<!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>
翻了下百度开放平台 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() + "级"); });
刚好以前弄过一个！注意需要你自己去baidu申请一个密钥！
翻了下百度开放平台 http://lbsyun.baidu.com/index...
这个不是么？