业务需要 指定一个地图上的范围,为了便于采集坐标数据,开发以下程序
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
} #allmap {
margin-right: 300px;
height: 100%;
overflow: hidden;
} #result {
border-left: 1px dotted #999;
height: 100%;
width: 295px;
position: absolute;
top: 0px;
right: 0px;
font-size: 12px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
p {
font-size: 12px;
}
dt {
font-size: 14px;
font-family: "微软雅黑";
font-weight: bold;
border-bottom: 1px dotted #000;
padding: 5px 0 5px 5px;
margin: 5px 0;
}
dd {
padding: 5px 0 0 5px;
}
li {
line-height: 28px;
} .red {
color: red;
}
</style>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5E5EE28a7615536d1ffe2ce2a3667859">
</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>
</head>
<body>
<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
</div>
<div id="panelWrap" style="width:0px;position:absolute;top:0px;right:0px;height:100%;overflow:auto;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
<div style="width:20px;height:200px;margin:-100px 0 0 -10px;color:#999;position:absolute;opacity:0.5;top:50%;left:50%;" id="showOverlayInfo">
此处用于展示覆盖物信息
</div>
<div id="panel" style="position:absolute;">
</div>
</div>
</div>
<div id="result">
<dl>
<dt>
操作
</dt>
<dd>
<ul>
<li>
<input type="button" value="重来" οnclick="iceReset();"/><input type="button" value="提交" οnclick="iceSubmit();"/>
</li>
</ul>
</dd>
</dl>
</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var bmap = {
status: false,
map: '',
point: '',
overlays: [],
overlaysCache: [],
myPolygon: '',
myOverlay: [],
drawingManager: '',
styleOptions: {
strokeColor: "red", //边线颜色。
fillColor: "blue", //填充颜色。当参数为空时,圆形将没有填充效果。
strokeWeight: 3, //边线的宽度,以像素为单位。
strokeOpacity: 0.8, //边线透明度,取值范围0 - 1。
fillOpacity: 0.3, //填充的透明度,取值范围0 - 1。
strokeStyle: 'solid' //边线的样式,solid或dashed。
},
/**
* 实例化
*/
init: function(){
if (this.status) {
return;
}
this.status = true;
this.map = new BMap.Map('map');
var map = this.map;
var styleOptions = this.styleOptions;
}
};
bmap.init();
var x = 116.647632, y = 39.940239;
var delta = 0.0062;
var range = [[x - delta, y - delta], [x + delta, y - delta], [x + delta, y + delta], [x - delta, y + delta]];
var poly;
function iceReset(){
if (poly) {
bmap.map.removeOverlay(poly);
}
var points = [];
for (var i in range) {
points.push(new BMap.Point(range[i][0], range[i][1]));
}
poly = new BMap.Polygon(points, bmap.styleOptions);
bmap.map.addOverlay(poly);
poly.enableEditing();
}
function iceSubmit(){
var points = [];
var path = poly.getPath();
for (var i in path) {
points.push('["' + path[i].lng + '","' + path[i].lat + '"]');
}
alert('[' + points.join(',') + ']');
}
window.setTimeout(function(){
bmap.map.centerAndZoom(new BMap.Point(x, y), 15);
iceReset();
}, 500);
</script>
</body>
</html>
百度地图 JS 可编辑 多边形
最新推荐文章于 2024-05-15 15:35:30 发布