不从坐标（从数组）在地图上绘制多边形
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了不从坐标（从数组）在地图上绘制多边形相关的知识，希望对你有一定的参考价值。
我试图找出为什么多边形没有在我的谷歌地图上绘制。我将它关闭到阵列但是不能说实话我做错了什么。我从下面的代码中删除了google API KEY，以便将其缩短。
任何提示/反馈？
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>
</body>
<script>
function initialize()
{
//fill array with coordinates
var path = [
[51.14920179999362, 3.706512451171875],
[50.99042122689005, 3.475799560546875],
[50.93852713736125, 3.73809814453125],
[50.95929172950454, 4.003143310546875],
[51.108695514831865, 3.972930908203125]
];
//Options for the map
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(51.0108706, 3.7264613),
}
//generate map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
//options for the polygon
var polyOptions = {
paths: path,
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#FF0000',
fillOpacity: 0.35,
editable: false, //editeren van de polygon
draggable: false //verplaatsen van de polygon
};
//create the polygon
var polygon = new google.maps.Polygon(polyOptions);
polygon.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>
答案
将数组数组转换为LatLngLiteral对象（或LatLng对象）数组。
var fixedPath = [];
for (var i=0; i<path.length; i++) {
fixedPath.push({lat:path[i][0],lng:path[i][1]});
}
//options for the polygon
var polyOptions = {
paths: fixedPath,
代码段：
function initialize() {
//fill array with coordinates
var path = [
[51.14920179999362, 3.706512451171875],
[50.99042122689005, 3.475799560546875],
[50.93852713736125, 3.73809814453125],
[50.95929172950454, 4.003143310546875],
[51.108695514831865, 3.972930908203125]
];
//Options for the map
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(51.0108706, 3.7264613),
}
//generate map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var fixedPath = [];
for (var i = 0; i < path.length; i++) {
fixedPath.push({
lat: path[i][0],
lng: path[i][1]
});
}
//options for the polygon
var polyOptions = {
paths: fixedPath,
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#FF0000',
fillOpacity: 0.35,
editable: false, //editeren van de polygon
draggable: false //verplaatsen van de polygon
};
//create the polygon
var polygon = new google.maps.Polygon(polyOptions);
polygon.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map {
height: 100%;
width: 100%;
a margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>以上是关于不从坐标（从数组）在地图上绘制多边形的主要内容，如果未能解决你的问题，请参考以下文章