javascript - 谷歌地图多段线

Question

我有一个google map sample具有多个多边形。我将 new google.maps.Polygon 函数更改为折线

     new google.maps.Polyline({
                paths: arr,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            })

但它并没有画出界限。 Fiddle here 。还有如何将对象名称设置为信息窗口内容。我尝试过

 var infowindow = new google.maps.InfoWindow({
            content: i
        });

Edited fiddle .

Answer 1

google.maps.Polyline 没有 paths 属性。变化:

 new google.maps.Polyline({
            paths: arr,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35
        })

致:

 new google.maps.Polyline({
            path: arr,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35
        })

updated fiddle

代码片段:

var map, infoWindow;

function initialize() {
    var mapOptions = {
      zoom: 5,
      center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var bounds = new google.maps.LatLngBounds();
    var polygons = [];
    var arr = new Array();
    var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    // Define the LatLng coordinates for the polygon's path.
    var coordinates = {
      "feed1": [
        [25.774252, -80.190262],
        [18.466465, -66.118292],
        [32.321384, -64.75737],
        [25.774252, -80.190262]
      ],

      "feed2": [
        [26.774252, -81.190262],
        [19.466465, -67.118292],
        [33.321384, -65.75737],
        [26.774252, -81.190262]
      ],

      "feed3": [
        [27.774252, -82.190262],
        [20.466465, -68.118292],
        [34.321384, -66.75737],
        [27.774252, -82.190262]
      ]
    };
    for (var i in coordinates) {
      arr = [];

      for (var j = 0; j < coordinates[i].length; j++) {
        arr.push(new google.maps.LatLng(
          parseFloat(coordinates[i][j][0]),
          parseFloat(coordinates[i][j][1])
        ));

        bounds.extend(arr[arr.length - 1])
      }

      // Construct the polygon.
      polygons.push(new google.maps.Polyline({
        path: arr,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
      }));
      polygons[polygons.length - 1].setMap(map);

      var infowindow = new google.maps.InfoWindow({
        content: "Hello World!"
      });

      google.maps.event.addListener(polygons[polygons.length - 1], 'click', function(event) {
        infowindow.open(map);
        infowindow.setPosition(event.latLng);
      });

    }
    map.fitBounds(bounds);


    //google.maps.event.addListener(arr, 'click', showArrays);
    // infoWindow = new google.maps.InfoWindow();
  }
  /*
  function showArrays(event) {

    var contentString = '<b>Bermuda Triangle polygon</b><br>';

    // Replace the info window's content and position.
    infoWindow.setContent(contentString);
   // infoWindow.setPosition(event.latLng);

    infoWindow.open(map);
  } */

google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>