JS - 百度地圖工具類
使用前申請好key就OK啦
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#container {width:800px;height:800px;overflow:hidden;margin:0;padding:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=key"></script>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></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>工具控件</title>
<style>
#type,#marker,#circle,#result {font-size:25px;}
</style>
</head>
<body>
<div class="main">
<table>
<tr>
<td>
<div id="container"></div>
</td>
<td>
<div id="type">類型</div>
<div id="marker">經緯度</div>
<div id="circle">半徑</div>
<div id="result">距離或面積</div>
</td>
</tr>
</table>
</div>
<script>
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(118.101766, 36.835935), 15);
var myDrawingManagerObject = new BMapLib.DrawingManager(map,
{
//是否开启绘制模式
isOpen: true,
drawingType: BMAP_DRAWING_MARKER,
//是否添加绘制工具栏控件
enableDrawingTool: true,
enableCalculate: true,
drawingToolOptions: {
//停靠位置、默认左上角
anchor: BMAP_ANCHOR_TOP_LEFT,
//偏移值
offset: new BMap.Size(10, 10),
drawingTypes : [
BMAP_DRAWING_MARKER,
BMAP_DRAWING_CIRCLE,
BMAP_DRAWING_POLYLINE,
BMAP_DRAWING_POLYGON,
BMAP_DRAWING_RECTANGLE
]
},
polylineOptions: {
strokeColor: "#000"
}
});
myDrawingManagerObject.addEventListener("markercomplete", function(e, overlay) {
console.log(overlay.point);
document.getElementById('marker').innerHTML = '纬度: '
+ overlay.point.lng
+ ' | 经度:'
+ overlay.point.lat;
});
myDrawingManagerObject.addEventListener("circlecomplete", function(e, overlay) {
console.log(overlay.xa);
document.getElementById('circle').innerHTML = '半徑: ' + overlay.xa;
});
myDrawingManagerObject.addEventListener("polylinecomplete", function(e, overlay) {
console.log(overlay);
});
myDrawingManagerObject.addEventListener("polygoncomplete", function(e, overlay) {
console.log(overlay);
});
myDrawingManagerObject.addEventListener("rectanglecomplete", function(e, overlay) {
console.log(overlay);
});
myDrawingManagerObject.addEventListener("overlaycomplete", function(e) {
//alert(e.drawingMode);
//alert(e.overlay);
//alert(e.calculate);
var result = e.calculate;
document.getElementById('result').innerHTML = '距離或面積: ' + result;
var type = myDrawingManagerObject.getDrawingMode();
document.getElementById('type').innerHTML = '類型: ' + type;
});
</script>
</body>
</html>
不错哦,可以收藏了。。@(哈哈)
๑乛◡乛๑
请问你那个“页面加载[0.0001 s]”是怎么优化出来的...... @(不高兴)
@(呵呵) 这个有插件的吧
在頁面頂部和尾部用microtime()函數獲取2次時間戳,然後計算得出的時間差就是這個啦
我是问为什么那么快啊,每次都是 0.0001 我很嫉妒啊。 @(不高兴)
你當阿里云ECS跟你鬧着玩的啊 ╮(╯▽╰)╭