标记拖动后，即使多边形线也不会根据标记改变
Posted
技术标签:
【中文标题】标记拖动后，即使多边形线也不会根据标记改变【英文标题】：After marker drag even polygon line doesn't change as per marker 【发布时间】：2018-08-30 16:13:36 【问题描述】：我正在研究谷歌地图多边形标记，我已经预定义了 lat long 数组，并且需要设置多边形区域，这对我来说工作正常，但是当我拖动标记多边形线时，它应该没有改变当我拖动标记时会发生变化，有人可以帮我解决这个问题吗？我在这里添加了我的代码，有人可以帮我吗？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon Arrays</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map
height: 100%;
/* Optional: Makes the sample page fill the window. */
html, body
height: 100%;
margin: 0;
padding: 0;
</style>
</head>
<body>
<div id="map"></div>
<input type="text" name="estimated_area" id="estimated_area" value="">
<input type="text" name="field_fj0d6" id="field_fj0d6" value="">
<script>
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
var map;
var infoWindow;
var markers = []; // Store Marker in an Array
function initMap()
var lM = 't';
map = new google.maps.Map(document.getElementById('map'),
zoom: 5,
center: lat: 24.886, lng: -70.268,
mapTypeId: 'terrain'
);
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
lat: 25.774, lng: -80.190,
lat: 18.466, lng: -66.118,
lat: 32.321, lng: -64.757
];
// Add Markers to Coordinates
for (var i = 0; i < triangleCoords.length; i++)
var pos = triangleCoords[i];
var marker = new google.maps.Marker(
map: map,
position: pos,
draggable: true,
);
marker.setMap(map);
markers.push(marker);
var measure =
mvcLine: new google.maps.MVCArray(),
mvcPolygon: new google.maps.MVCArray(),
mvcMarkers: new google.maps.MVCArray(),
line: null,
polygon: null
;
var latLng = pos;
var dot = marker;
/************** New Code ****************/
measure.mvcLine.push(latLng);
measure.mvcPolygon.push(latLng);
measure.mvcMarkers.push(dot);
var latLngIndex = measure.mvcLine.getLength() - 1;
google.maps.event.addListener(dot, "drag", function (evt)
measure.mvcLine.setAt(latLngIndex, evt.latLng);
measure.mvcPolygon.setAt(latLngIndex, evt.latLng);
);
google.maps.event.addListener(dot, "dragend", function ()
console.log('<p>Marker dropped: Current Lat: ' + this.getPosition().lat() + ' Current Lng: ' + this.getPosition().lng() + '</p>');
drag = true;
setTimeout(function ()
drag = false;
, 250);
if (measure.mvcLine.getLength() > 1)
mC();
);
if (measure.mvcLine.getLength() > 1)
if (!measure.line)
measure.line = new google.maps.Polyline(
map: map,
clickable: false,
strokeColor: "#ff5b06",
strokeOpacity: 1,
strokeWeight: 3,
path: measure.mvcLine
);
if (measure.mvcPolygon.getLength() > 2)
if (!measure.polygon)
if (lM)
measure.polygon = new google.maps.Polygon(
clickable: false,
map: map,
fillOpacity: 0.6,
fillColor: '#000000',
strokeOpacity: 0,
paths: measure.mvcPolygon
);
else
measure.polygon = new google.maps.Polygon(
clickable: false,
map: map,
fillOpacity: 0.6,
fillColor: '#000000',
strokeOpacity: 0,
paths: measure.mvcPolygon
);
if (measure.mvcLine.getLength() > 1)
mC();
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon(
paths: triangleCoords,
strokeColor: '#ff5b06',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#000000',
fillOpacity: 0.6
);
bermudaTriangle.setMap(map);
function mR()
if (measure.polygon)
measure.polygon.setMap(null);
measure.polygon = null;
if (measure.line)
measure.line.setMap(null);
measure.line = null
measure.mvcLine.clear();
measure.mvcPolygon.clear();
measure.mvcMarkers.forEach(function (elem, index)
elem.setMap(null);
);
measure.mvcMarkers.clear();
document.getElementById('estimated_area').value = '';
document.getElementById('field_fj0d6').value = '';
function mC()
var l = 0;
if (measure.mvcPolygon.getLength() > 1)
l = google.maps.geometry.spherical.computeLength(measure.line.getPath());
var a = 0;
if (measure.mvcPolygon.getLength() > 2)
a = google.maps.geometry.spherical.computeArea(measure.polygon.getPath());
if (a)
var km = a / (1000 * 1000);
var feet = a * 10.7639104;
var yards = a * 1.19599005;
var acres = a * 0.000247105381;
var unit = " meters²";
var unit1 = " acres";
var unit2 = " km²";
var unit3 = " sq. ft.";
var unit4 = " yards²";
var area = feet.toFixed(0) + unit3;
//This is for update details in review tab
document.getElementById('estimated_area').value = parseFloat(area);
document.getElementById('field_fj0d6').value = String(area);
function rL()
var test = measure.mvcLine.pop();
if (test)
measure.mvcPolygon.pop();
var dot = measure.mvcMarkers.pop();
dot.setMap(null);
mC();
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYeDBDl-8Wx98Az55EbVnpvRfSIBbwxyE&callback=initMap">
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：您需要将多边形的顶点绑定到标记。
var bermudaTriangle = new google.maps.Polygon(
paths: triangleCoords,
strokeColor: '#ff5b06',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#000000',
fillOpacity: 0.6
);
bermudaTriangle.setMap(map);
bermudaTriangle.binder = new MVCArrayBinder(bermudaTriangle.getPath());
for (var j = 0; j < bermudaTriangle.getPath().getLength(); j++)
var mark = new google.maps.Marker(
position: bermudaTriangle.getPath().getAt(),
map: map,
draggable: true
);
mark.bindTo('position', bermudaTriangle.binder, (j).toString());
online example
proof of concept fiddle
代码 sn-p：
var map;
var markers = []; // Store Marker in an Array
function initMap()
map = new google.maps.Map(document.getElementById('map'),
zoom: 5,
center:
lat: 24.886,
lng: -70.268
,
mapTypeId: 'terrain'
);
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
lat: 25.774,
lng: -80.190
,
lat: 18.466,
lng: -66.118
,
lat: 32.321,
lng: -64.757
];
// Add Markers to Coordinates
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon(
paths: triangleCoords,
strokeColor: '#ff5b06',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#000000',
fillOpacity: 0.6
);
bermudaTriangle.setMap(map);
bermudaTriangle.binder = new MVCArrayBinder(bermudaTriangle.getPath());
for (var j = 0; j < bermudaTriangle.getPath().getLength(); j++)
var mark = new google.maps.Marker(
position: bermudaTriangle.getPath().getAt(),
map: map,
draggable: true
);
mark.bindTo('position', bermudaTriangle.binder, (j).toString());
google.maps.event.addDomListener(window, 'load', initMap);
/*
* Use bindTo to allow dynamic drag of markers to refresh poly.
*/
function MVCArrayBinder(mvcArray)
this.array_ = mvcArray;
MVCArrayBinder.prototype = new google.maps.MVCObject();
MVCArrayBinder.prototype.get = function(key)
if (!isNaN(parseInt(key)))
return this.array_.getAt(parseInt(key));
else
this.array_.get(key);
MVCArrayBinder.prototype.set = function(key, val)
if (!isNaN(parseInt(key)))
this.array_.setAt(parseInt(key), val);
else
this.array_.set(key, val);
html,
body,
#map
height: 100%;
margin: 0;
padding: 0;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>【讨论】：
以上是关于标记拖动后，即使多边形线也不会根据标记改变的主要内容，如果未能解决你的问题，请参考以下文章