利用騰訊地圖JS API GL 實現 “多邊形區域判定點擊事件位置”
技術點：HTML5+CSS3+js
代碼部分：
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
#mapContainer {
width: 100%;
height: 100%;
}
<body onload="initMap()">
<div id="mapContainer"></div>
</body>
<script>
function initMap() {
var center = new TMap.LatLng(40.040452,116.273486);//設置中心點座標
//初始化地圖
var map = new TMap.Map('mapContainer', {
center: center,
zoom: 16
});
var path = [ //多邊形的位置信息
new TMap.LatLng(40.041054, 116.272303),
new TMap.LatLng(40.039419, 116.272721),
new TMap.LatLng(40.039764, 116.274824),
new TMap.LatLng(40.041374, 116.274491),
]
//初始化polygon
var polygon = new TMap.MultiPolygon({
id: 'polygon-layer', //圖層id
map: map, //顯示多邊形圖層的底圖
styles: { //多邊形的相關樣式
'polygon': new TMap.PolygonStyle({
'color': '#3777FF', //面填充色
'showBorder':false, //是否顯示拔起面的邊線
'borderColor': '#00FFFF' //邊線顏色
})
},
geometries: [
{
'id': 'polygon', //多邊形圖形數據的標誌信息
'styleId': 'polygon', //樣式id
'paths': path, //多邊形的位置信息
'properties': { //多邊形的屬性數據
'title': 'polygon'
}
}
]
});
marker = new TMap.MultiMarker({
id: 'marker-layer',
map: map,
styles: {
"marker": new TMap.MarkerStyle({
"width": 25,
"height": 20,
"anchor": { x: 16, y: 32 },
"src": 'img/markers.jpg'
})
},
geometries: [{
"id": 'demo',
"styleId": 'marker',
"position": new TMap.LatLng(40.040054, 116.273903),
"properties": {
"title": "marker"
}
}]
});
marker1 = new TMap.MultiMarker({
id: 'marker-layer1',
map: map,
styles: {
"marker": new TMap.MarkerStyle({
"width": 25,
"height": 20,
"anchor": { x: 16, y: 32 },
"src": 'img/markers.jpg'
})
},
geometries: [{
"id": 'demo1',
"styleId": 'marker',
"position": new TMap.LatLng(40.041054, 116.272273),
"properties": {
"title": "marker"
}
}]
});
marker1.on("click", function() {
var bounds = new TMap.LatLngBounds(new TMap.LatLng(40.039419,116.272721), new TMap.LatLng(40.041374,116.274491));
var isContains = bounds.contains(marker1.getGeometries()[0].position);
alert(isContains);
})
marker.on("click", function() {
var bounds = new TMap.LatLngBounds(new TMap.LatLng(40.039419,116.272721), new TMap.LatLng(40.041374,116.274491));
var isContains = bounds.contains(marker.getGeometries()[0].position);
alert(isContains);
})
}
</script>