地图上绘制多边形
Posted 楚兴
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了地图上绘制多边形相关的知识，希望对你有一定的参考价值。
根据输入的一组点的坐标，生成对应的封闭多边形。
实现代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>显示多边形</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.3&key=5bc7ab8efc62334c67887ecd3c21a3a7"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var map;
map = new AMap.Map(‘mapContainer‘, {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 13
});
map.plugin(["AMap.ToolBar"],function(){
toolBar=new AMap.ToolBar();
map.addControl(toolBar);
});
function add_circle(x, y, color) {
circle = new AMap.Circle({
center:new AMap.LngLat(x, y),
radius:10,
strokeColor: color,
strokeOpacity: 1,
strokeWeight: 3,
fillColor: color,
fillOpacity: 3
});
circle.setMap(map);
}
function add_marker(x, y, index){
var marker = new AMap.Marker({ //添加自定义点标记
map: map,
position: [x, y], //基点位置
offset: new AMap.Pixel(-17, -42), //相对于基点的偏移位置
draggable: true, //是否可拖动
content: "<p style=‘font-size:10px; color:blue‘>"+index+"</p>" //自定义点标记覆盖物内容
});
marker.setMap(map);
}
function add_polygon(polygonArr){
var polygon = new AMap.Polygon({
path: polygonArr,//设置多边形边界路径
strokeColor: "#FF33FF", //线颜色
strokeOpacity: 0.2, //线透明度
strokeWeight: 3, //线宽
fillColor: "#1791fc", //填充色
fillOpacity: 0.35//填充透明度
});
polygon.setMap(map);
}
$(‘#show‘).click(function(){
var polygonArr=new Array();
var p;
var points=$.parseJSON($(‘#content‘).val());
add_circle(points[0][0]/1000000, points[0][1]/1000000, "red");
for(var i=0;i<points.length;i++) {
p=points[i];
var x = p[0]/1000000;
var y = p[1]/1000000;
polygonArr.push([x, y]);
add_circle(x, y, ‘blue‘);
add_marker(x, y, i);
}
add_polygon(polygonArr);
add_circle(p[0]/1000000, p[1]/1000000, "green");
map.setZoomAndCenter(13, new AMap.LngLat(p[0]/1000000, p[1]/1000000));
});
});
</script>
<style>
.container {
width:1300px;
height:100%;
margin:0 auto;
}
#mapContainer {
width:600px;
height:600px;
margin:5px 10px;
float:left;
background-color:lightblue;
}
#content{
width:600px;
height:600px;
font-size: 12px;
margin:5px 10px;
float:left;
}
#show{
width: 80px;
height: 60px;
font-size:12px;
margin: 5px 10px;
float: left;
clear: both;
}
p{
float: left;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<h1>Show Polygon</h1>
<div class="row">
<div class="col">
<textarea id="content" rows="30"></textarea>
</div>
<div class="col">
<div id="mapContainer"></div>
</div>
</div>
<input type= "button" id="show" value="Show" />
<p>红色为起点，绿色为终点，蓝色为中间结点，数字为结点编号</p>
</body>
</html>实现效果
以上是关于地图上绘制多边形的主要内容，如果未能解决你的问题，请参考以下文章