[英]Google Maps JS API v3 - How to check and display distance between polygon points
我正在使用谷歌地圖API來允許用戶在地圖上繪制自定義多邊形。 我需要檢查並顯示每個邊框的長度。
我已經使用Geometry Library和Map Label Library來獲取並顯示多邊形的計算區域(也改變'insert_at'和'set_at'事件),但不幸的是我不知道如何獲得邊框長度。 任何幫助將不勝感激。
二手代碼示例:
var labels = [];
var allOverlays = [];
function setSelection(shape) {
selectedShape = shape;
shape.setEditable(true);
}
function initMap() {
var options = {
zoom: 14,
center: {lat: 52.250618, lng: 20.9774}
}
var map = new google.maps.Map(document.getElementById('map'), options);
var drawingManager = new google.maps.drawing.DrawingManager({
markerOption: {
draggable: false
},
polygonOptions: {
draggable: false,
fillColor: '#5C6BC0',
fillOpacity: 0.45,
strokeWeight: 0,
editable: true,
zIndex: 1
},
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['circle', 'polygon']
},
circleOptions: {
fillColor: '#5C6BC0',
fillOpacity: 0.45,
strokeWeight: 0,
editable: true,
zIndex: 1
},
map: map
});
function attachPolygonInfoWindow(polygon) {
var path = polygon.getPath();
var points = path.getArray();
var area = (google.maps.geometry.spherical.computeArea(path.getArray())).toFixed(0);
var bounds = new google.maps.LatLngBounds();
var i;
for (i = 0; i < points.length; i++) {
bounds.extend(points[i]);
}
var boundsCenter = bounds.getCenter();
var mapLabel = new MapLabel({
map: map,
fontSize: 20,
align: 'left'
});
if (!labels.length) {
labels.push(mapLabel)
}
showPolygonInfoWindow(labels, boundsCenter, area);
}
function showPolygonInfoWindow(arr, position, text) {
arr.forEach((el) => {
el.set('position', position);
el.set('text', text + 'm2')
})
}
function removePolygonInfoWindow() {
for (var i = 0; i < labels.length; i++) {
labels[i].setMap(null);
}
labels = [];
}
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
allOverlays.push(e);
if (e.type != google.maps.drawing.OverlayType.MARKER) {
drawingManager.setDrawingMode(null);
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
if (newShape.type == "polygon") {
var path = newShape.getPath();
google.maps.event.addListener(path, 'insert_at', function() {
attachPolygonInfoWindow(newShape);
});
google.maps.event.addListener(path, 'set_at', function() {
attachPolygonInfoWindow(newShape);
});
attachPolygonInfoWindow(newShape);
}
setSelection(newShape);
}
});
}
initMap();
<script src="https://maps.google.com/maps/api/js?sensor=false&libraries=drawing,geometry">
</script>
<script type="text/javascript" src="https://cdn.rawgit.com/googlemaps/js-map-label/gh-pages/src/maplabel.js"></script>
我想在每個邊框的邊上顯示每個邊框的長度。
我的建議是當你創建中心標簽時,也要處理通過多邊形的路徑,計算它們的長度和中心; 然后為每個創建MapLabel
對象並將其放置在側面的中心。 就像是:
for (var i=0; i<polygon.getPath().getLength(); i++) {
// for each side in path, compute center and length
var start = polygon.getPath().getAt(i);
var end = polygon.getPath().getAt(i<polygon.getPath().getLength()-1 ? i+1 : 0);
var sideLength = google.maps.geometry.spherical.computeDistanceBetween(start,end);
var sideCenter = google.maps.geometry.spherical.interpolate(start, end, 0.5);
var sideLabel = new MapLabel({
map: map,
fontSize: 20,
align: "center"
});
sideLabel.set("position", sideCenter);
sideLabel.set("text", sideLength.toFixed(2)+"m");
polygon.labels.push(sideLabel);
}
代碼段:
var labels = []; var allOverlays = []; function setSelection(shape) { selectedShape = shape; shape.setEditable(true); } function initMap() { var options = { zoom: 14, center: { lat: 52.250618, lng: 20.9774 } }; var map = new google.maps.Map(document.getElementById("map"), options); var drawingManager = new google.maps.drawing.DrawingManager({ polygonOptions: { draggable: false, fillColor: "#5C6BC0", fillOpacity: 0.45, strokeWeight: 0, editable: true, zIndex: 1 }, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: ["polygon"] }, map: map, drawingMode: 'polygon' }); function attachPolygonInfoWindow(polygon) { if (!polygon.labels) polygon.labels = []; for (var i = 0; i < polygon.labels.length; i++) { polygon.labels[i].setMap(null); } polygon.labels = []; var path = polygon.getPath(); var points = path.getArray(); var area = google.maps.geometry.spherical .computeArea(path.getArray()) .toFixed(0); var bounds = new google.maps.LatLngBounds(); var i; for (i = 0; i < points.length; i++) { bounds.extend(points[i]); } var boundsCenter = bounds.getCenter(); var centerLabel = new MapLabel({ map: map, fontSize: 20, align: "left" }); polygon.labels.push(centerLabel); centerLabel.set("position", bounds.getCenter()); centerLabel.set("text", area + "m2"); if (path.getLength() < 2) return; for (var i = 0; i < polygon.getPath().getLength(); i++) { // for each side in path, compute center and length var start = polygon.getPath().getAt(i); var end = polygon.getPath().getAt(i < polygon.getPath().getLength() - 1 ? i + 1 : 0); var sideLength = google.maps.geometry.spherical.computeDistanceBetween(start, end); var sideCenter = google.maps.geometry.spherical.interpolate(start, end, 0.5); var sideLabel = new MapLabel({ map: map, fontSize: 20, align: "center" }); sideLabel.set("position", sideCenter); sideLabel.set("text", sideLength.toFixed(2) + "m"); polygon.labels.push(sideLabel); } } function removePolygonInfoWindow() { for (var i = 0; i < labels.length; i++) { labels[i].setMap(null); } labels = []; } google.maps.event.addListener(drawingManager, "overlaycomplete", function(e) { allOverlays.push(e); if (e.type != google.maps.drawing.OverlayType.MARKER) { drawingManager.setDrawingMode(null); var newShape = e.overlay; newShape.type = e.type; google.maps.event.addListener(newShape, "click", function() { setSelection(newShape); }); if (newShape.type == "polygon") { var path = newShape.getPath(); google.maps.event.addListener(path, "insert_at", function() { attachPolygonInfoWindow(newShape); }); google.maps.event.addListener(path, "set_at", function() { attachPolygonInfoWindow(newShape); }); attachPolygonInfoWindow(newShape); } setSelection(newShape); } }); } initMap();
html, body, #map { height: 100%; margin: 0; padding: 0; }
<div id="map"></div> <!-- Replace the value of the key parameter with your own API key. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing"></script> <script src="https://cdn.jsdelivr.net/npm/js-map-label@1.0.1/src/maplabel.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.