我们如何在谷歌地图中为多边形应用可编辑标记
Posted
技术标签:
【中文标题】我们如何在谷歌地图中为多边形应用可编辑标记【英文标题】：How can we apply editable marker for polygon in google map 【发布时间】：2018-08-22 19:31:15 【问题描述】：我正在研究多边形距离区域，我想添加标记并想要获取它之间的距离，我找到了代码，但我无法编辑该多边形区域并且无法添加标记，我尝试了很多，但它对我不起作用，谁能帮我解决这个问题，我该如何解决这个问题？
<!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>
<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;
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
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon(
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
);
bermudaTriangle.setMap(map);
// Add a listener for the click event.
bermudaTriangle.addListener('click', showArrays);
infoWindow = new google.maps.InfoWindow;
/** @this google.maps.Polygon */
function showArrays(event)
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
var vertices = this.getPath();
var contentString = '<b>Bermuda Triangle polygon</b><br>' +
'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
'<br>';
// Iterate over the vertices.
for (var i =0; i < vertices.getLength(); i++)
var xy = vertices.getAt(i);
contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
xy.lng();
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYeDBDl-8Wx98Az55EbVnpvRfSIBbwxyE&callback=initMap">
</script>
</body>
</html>
【问题讨论】：
您尝试添加哪些标记或编辑不起作用的多边形？您想在发布的代码中添加什么？ 【参考方案1】：要添加标记，请编辑您的脚本并将此代码放在 triangleCoords 下：
// 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);
要使用标记做一些特定的事情，请转到此处：Learn About Marker 要获取距离，请使用距离矩阵：Learn About Distance Matrix
希望这可以帮助您开始行动。 JSBin：copy of your code w/ marker
【讨论】：
非常感谢，你能帮我如何拖动这个标记吗？这样我可以改变区域 只需将“可拖动”选项添加到您的标记选项中。我编辑了代码以包含“可拖动”。了解有关标记选项的更多信息：[developers.google.com/maps/documentation/javascript/… JavaScript V3 参考（MarkerOption 属性） - [developers.google.com/maps/documentation/javascript/reference/3/…以上是关于我们如何在谷歌地图中为多边形应用可编辑标记的主要内容，如果未能解决你的问题，请参考以下文章