javascript - 关于百度地图JS API获取经纬度的一个问题
本文介绍了javascript - 关于百度地图JS API获取经纬度的一个问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
目前有这样一个需求: 在地图上用鼠标点击确定顶点的方式划定一个多边形,并且将多边形的对应的经纬度按顺序写入数据库,这个功能需要集成到网站中。
我思路是这样的:直接用百度地图API展示地图,关键是要获取鼠标所在点的经纬度(然后再蒙上一层DIV或者直接用添加覆盖物API),类似这样:http://api.map.baidu.com/lbsa... 但是这是一个产品,而我要使用的是API
目前没有在百度地图发现这样的API,不知道各位朋友有没有什么解决方案?
解决方案
刚好以前弄过一个！注意需要你自己去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>
<div id="allmap">
<div id="map" style="width:100%;height:100%;"></div>
</div>
<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>
这篇关于javascript - 关于百度地图JS API获取经纬度的一个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
