I'm using google maps API to allow the user draw polygons and display the length of every single border using maplabel library
. But I have a problem when removing polygon
and map label
, I don't know how to remove them from Google Map.
My code looks like this:
HTML
<button id="enablePolygon">draw</button>
<button id="removePolygon">remove</button>
<div id="map"></div>
<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>
JS
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: "#0e97fa",
fillOpacity: 0.2,
strokeWeight: 2,
strokeColor: "#0e97fa",
editable: true,
zIndex: 1
},
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes:
[
google.maps.drawing.OverlayType.POLYGON,
/* google.maps.drawing.OverlayType.POLYLINE, */
]
},
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,
position: boundsCenter,
fontSize: 14,
align: "center",
zIndex: 3
});
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);
console.log(sideLength)
var sideCenter = google.maps.geometry.spherical.interpolate(start, end, 0.5);
/* console.log("sideCenter=" + sideCenter.toUrlValue(6)); */
var sideLabel = new MapLabel({
map: map,
fontSize: 14,
align: "center",
zIndex: 3
});
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);
}
});
var enablePolygon = document.getElementById('enablePolygon');
enablePolygon.addEventListener('click', function(){
drawingManager.setMap(map);
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
});
var removePolygon = document.getElementById('removePolygon');
removePolygon.addEventListener('click', function(){
selectedShape.setMap(null);
drawingManager.setMap(null);
centerLabel.setRemoveLabel(true);
});
}
initMap();
I get a javascript error with the posted code: Uncaught ReferenceError: centerLabel is not defined
. Not sure why you are using that variable, you are saving the labels in a property of the polygons labels
. To remove them, iterate through that array, calling .setMap(null)
on each label.
removePolygon.addEventListener('click', function() {
selectedShape.setMap(null);
drawingManager.setMap(null);
for (var i = 0; i < selectedShape.labels.length; i++) {
selectedShape.labels[i].setMap(null);
}
});
code snippet:
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: "#0e97fa", fillOpacity: 0.2, strokeWeight: 2, strokeColor: "#0e97fa", editable: true, zIndex: 1 }, drawingControl: false, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.POLYGON, /* google.maps.drawing.OverlayType.POLYLINE, */ ] }, 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: position, boundsCenter: fontSize, 14: align, "center": zIndex; 3 }). 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). console.log(sideLength) var sideCenter = google.maps.geometry.spherical,interpolate(start, end. 0;5). /* console.log("sideCenter=" + sideCenter;toUrlValue(6)): */ var sideLabel = new MapLabel({ map, map: fontSize, 14: align, "center": zIndex; 3 }). 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). } }); var enablePolygon = document.getElementById('enablePolygon'), enablePolygon.addEventListener('click'; function() { drawingManager.setMap(map). drawingManager.setDrawingMode(google.maps.drawing;OverlayType;POLYGON). }); var removePolygon = document.getElementById('resetPolygon'), removePolygon.addEventListener('click'; function() { selectedShape.setMap(null); drawingManager;setMap(null). for (var i = 0. i < selectedShape;labels.length. i++) { selectedShape;labels[i];setMap(null); } }); } initMap();
html, body, #map { height: 100%; margin: 0; padding: 0; }
<button id="enablePolygon">draw</button> <button id="resetPolygon">remove</button> <div id="map"></div> <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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.