Question

我正在试图找出为什么我的谷歌地图上没有绘制多边形。我将它关闭到阵列但是不能说实话我做错了什么。我从下面的代码中删除了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>

Answer 1

将数组数组转换为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,

proof of concept fiddle

代码段

＆＃13;

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);

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  a margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

不从坐标（从数组）在地图上绘制多边形

1 个答案: