腾讯地图api调用示例-功能-画多边形画圆自动复制一个

最新推荐文章于 2024-03-27 11:08:07 发布

xRouter

最新推荐文章于 2024-03-27 11:08:07 发布

阅读量5.1k

点赞数

文章标签： api 地图api 腾讯

本文链接：https://blog.csdn.net/xRouter/article/details/51385252

版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>绘图工具</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#container{
min-width:600px;
min-height:767px;
}
</style>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&libraries=drawing"></script>
<script>
function init(){

var center = new qq.maps.LatLng(39.916527,116.397128);
var map = new qq.maps.Map(document.getElementById("container"),{
center: center,
zoom: 14
});
var drawingManager = new qq.maps.drawing.DrawingManager({
drawingMode: qq.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: qq.maps.ControlPosition.TOP_CENTER,
drawingModes: [
qq.maps.drawing.OverlayType.MARKER,
qq.maps.drawing.OverlayType.CIRCLE,
qq.maps.drawing.OverlayType.POLYGON,
qq.maps.drawing.OverlayType.POLYLINE,
qq.maps.drawing.OverlayType.RECTANGLE
]
},
circleOptions: {
fillColor: new qq.maps.Color(255, 208, 70, 0.3),
strokeColor: new qq.maps.Color(88, 88, 88, 1),
strokeWeight: 3,
clickable: false
}
});
drawingManager.setMap(map);
//设置overlaycomplete事件
qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(res) {
//获取到绘制的多边形或者矩形的经纬度坐标数组
if(res.type=="polygon"){
var paths=[];
var path = res.overlay.getPath().forEach(function(e) {
document.getElementById("arrPath").innerHTML += "(" + e + "),";
paths.push(new qq.maps.LatLng(e.getLat(),e.getLng()+0.00286));
});

var polygon = new qq.maps.Polygon({
map: map,
path: paths,
strokeColor: new qq.maps.Color(0, 0, 0, 0.8),
fillColor: qq.maps.Color.fromHex("#FFFFFF", 0.5)
});
}
if(res.type=="circle"){
document.getElementById("arrPath").innerHTML += "圆心：(" + res.overlay.getCenter() + "), 半径："+res.overlay.getRadius();

var circle = new qq.maps.Circle({
map: map,
center: new qq.maps.LatLng(res.overlay.getCenter().getLat(),res.overlay.getCenter().getLng()+0.00286),
radius: res.overlay.getRadius(),
strokeWeight: 2
});
}
});
}
</script>
</head>
<body οnlοad="init()">
<div>
<div id="container"></div>
<div id="arrPath"></div>
</body>
</html>