外部文件引入
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=ca11d9894383ee611ed5**"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
CSS样式表
html, body, #container {
height: 100%
}
.amap-marker-label {
border: 0;
background-color: #FFF;
}
.info >span{
margin: auto 10px;
}
HTML容器
<div id="container"></div>
<div class='info'><span id="inRing"></span><span id="outRing"></span></div>
<script type="text/javascript">
核心代码
//初始化地图对象,加载地图
var map = new AMap.Map("container", {
center: [121.548181, 29.806906],
zoom: 15,
resizeEnable: true,
});
//数据格式化;
var data = "121.546266,29.80975;121.54543,29.806845;121.548713,29.806752;121.549957,29.809508";
var points = data.split(";");
var path = [];
for (var i = 0; i < points.length; i++) {
var point = points[i].split(",");
path.push([point[0], point[1]]);
}
// 创建多边形
var polygon = new AMap.Polygon({
map: map,
path: path,
strokeColor: "#1E9FFF",
strokeWeight: 2,
strokeStyle: 'dashed',
strokeOpacity: 1,
fillOpacity: 0.1,
fillColor: '#1E9FFF',
zIndex: 50,
});
// 创建点
var markers = [
{
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
position: [121.548181, 29.806906]
},
{
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png',
position: [121.550219, 29.807674]
},
{
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png',
position: [121.547244,29.808037]
},
{
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png',
position: [121.546252,29.807549]
}
];
var cTotal = [];
//添加标注;
var count = markers.length;
var total = [];//返回的状态数组;
for (var i = 0; i < count; i++) {
compute(addMaker(markers[i]));
total[i] = compute(addMaker(markers[i]));
}
//视图;
map.setFitView();
//数量统计;
//console.log(total);
var inRing = total.filter(item => item =="1").length;//内部;
var outRing = total.filter(item => item =="0").length;//外部;
//console.log('内部数量:'+inRing);
document.getElementById("inRing").innerHTML='内部数量:'+inRing;
//console.log('外部数量:'+outRing);
document.getElementById("outRing").innerHTML='外部数量:'+outRing;
//添加标注;
function addMaker(marker) {
var newMaker = new AMap.Marker({
map: map,
//icon: marker.icon,
//draggable: true,
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-13, -30)
});
return newMaker;
}
//判断是否在围栏内;
function compute(marker) {
var point = marker.getPosition();
var isPointInRing = AMap.GeometryUtil.isPointInRing(point, path);
// label默认蓝框白底左上角显示,样式className为:amap-marker-label
marker.setLabel({
content: isPointInRing ? '内部' : '外部',
offset: new AMap.Pixel(-5, 35)
});
//返回状态,予以统计;
if (isPointInRing == true) {
return 1;
} else {
return 0;
}
}
lockdatav Done !