Question

我有一个LatLng格式的坐标数组。我想用这些坐标构造一个多边形。我知道我可以用这样的单个坐标对多边形进行硬编码：

<select>
  <option value="_none">--</option>
  <option value="water">Water</option>
  <option value="waste">Waste</option>
</select>

是否可以将我的数组中的LatLng数据点放入triangleCoords并以此方式创建多边形？

Answer 1

如果我误解了你的问题，请纠正我。

问：是否可以将我的数组中的LatLng数据点放入triangleCoords并以这种方式创建多边形？

答

简短回答：不。遗憾的是，google.maps.Polygon代码中没有智能，它会神奇地试图找出指定lat个对象的lng和google.maps.LatLng坐标为了你。

您需要使用lat()和lng() API从google.maps.LatLng对象返回原始坐标值并将其插入阵列。没有捷径。

示例：

var map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: new google.maps.LatLng(22.7964, 79.8456), mapTypeId: google.maps.MapTypeId.HYBRID }); var coordinateA = new google.maps.LatLng(18.979026,72.949219); var coordinateB = new google.maps.LatLng(28.613459,77.255859); var coordinateC = new google.maps.LatLng(22.512557,88.417969); var coordinateD = new google.maps.LatLng(12.940322,77.607422); var coords = [ {lat: coordinateA.lat(), lng: coordinateA.lng() }, {lat: coordinateB.lat(), lng: coordinateB.lng() }, {lat: coordinateC.lat(), lng: coordinateC.lng() }, {lat: coordinateD.lat(), lng: coordinateD.lng() } ]; metros = new google.maps.Polygon( { paths: coords, strokeColor: "#0000FF", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#0000FF", fillOpacity: 0.26 });

有关正在运行的JSFiddle示例，请参阅here。 http://jsfiddle.net/SamuelToh/3srggbmu/

Answer 2

以同样的方式从 mysql 动态尝试多边形谷歌路线图，它仅适用于标记，但不适用于多边形，

这是代码

function initMap() 
{

      var map = new google.maps.Map(document.getElementById('map'),{
          zoom: 5,
          center: { lat: 13.36, lng: 77.03 },

      });

      var planCoordinates = new Array();
      // var locations = [
      //      {lat: 13.367797388285002, lng:77.03707749682616},
      //       {lat:13.341074247677549, lng:77.0394807561035},
      //       {lat:13.379153826558369, lng: 77.08685929614256},
      //       {lat: 13.367797388285002, lng:77.03707749682616},  
      // ];

    <?php
    if ($result->num_rows > 0) 
    {
     foreach($result as $key => $row) 
      {
       
  ?>
   
  var locations = [{lat: <?php echo $row['lat']; ?>,lng: <?php echo $row['lng']; ?>}];


      for (let i = 0; i < locations.length; i++) {

          let obj = locations[i];
          planCoordinates[i] = new google.maps.LatLng(obj.lat, obj.lng);
          var myLatlng = new google.maps.LatLng(obj.lat, obj.lng);

          poly = new google.maps.Polygon({
            path: planCoordinates,
            geodesic: true,
            strokeColor: 'hsla(290,60%,70%,0.3)',
            strokeOpacity: 1.0,
            strokeWeight: 3,
            fillColor: 'hsla(290,60%,70%,0.3)',
            fillOpacity: 1.35
          });
          poly.setMap(map);

          var infoWindow = new google.maps.InfoWindow({ content: contentString.this });

          var marker = new google.maps.Marker({
              position: myLatlng,
              title: "Jumbookart",
              zIndex: 999,
          });

          marker.setMap(map);

          let ikonica = new google.maps.Marker({
              position: myLatlng,
              title: "Markeri",
              icon: {
                  path: google.maps.SymbolPath.CIRCLE,
                  scale: 7
              }

          });
          ikonica.setMap(map);

      }
<?php } } ?>
      var arrayOfFlightPlans = [locations];

  //Loops through all polyline paths and draws each on the map.
  for (let i = 0; i < arrayOfFlightPlans.length; i++) {
       flightPath = new google.maps.Polygon({
      path: arrayOfFlightPlans[i],
      geodesic: true,
      strokeColor: 'hsla(290,60%,70%,0.3)',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        fillColor: 'hsla(290,60%,70%,0.3)',
        fillOpacity: 1.35
      });
      flightPath.setMap(map);
  }
  }

从LatLng点阵列填充Google地图多边形

2 个答案: