Question

我是google maps api的新手，我有一些POLYGONS和POLYINES。我试图在谷歌地图api中显示（多边形和折线）。我尝试了一些东西，但是不能同时显示多边形和折线，只显示多边形，如何显示多边形和折线。我有一个Json，json有源多边形或折线，这个源基于i＆＃39;我在这里显示我的英语。
希望有人能够让我知道我失败的地方。这是我的代码。Demo

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry,places&sensor=true"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div style="height: 450px;" id="map-canvas"></div>
<script>
$(function(){
    initialize();
});

function initialize() {
    var centerPoint = new google.maps.LatLng(13.09084815771412,80.26878878474236);
    var mapOptions = {
        zoom: 14,
        center: centerPoint,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
        mapTypeControl: false
    };

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


    var data = '[{"name":"Arumbakkam","id":"1620","source":"polygon","latlng":[{"lat":"13.080648730311745","lng":"80.2668146789074"},{"lat":"13.081819177841483","lng":"80.27453944087029"},{"lat":"13.086208306590859","lng":"80.27172848582268"},{"lat":"13.09084815771412","lng":"80.26878878474236"},{"lat":"","lng":null}]},{"name":"Chetpet","id":"1621","source":"polyline","latlng":[{"lat":"13.119271","lng":"80.095053"},{"lat":"13.117557","lng":"80.095203"},{"lat":"13.116408","lng":"80.101683"}]}]';
    var jsonData = JSON.parse(data);
    for (var i = 0; i < jsonData.length; i++) {
        var polName = jsonData[i].name;
        var id = jsonData[i].id;
        var latArr = jsonData[i].latlng;
        var source_d = jsonData[i].source;
        arr = [];
        for (j = 0; j < latArr.length; j++) {
            var lat = latArr[j].lat;
            var lng = latArr[j].lng;

            arr.push(new google.maps.LatLng(parseFloat(lat), parseFloat(lng)));
            bounds.extend(arr[arr.length - 1]);
        }

       if(source_d == "polygon"){

        polygons.push(new google.maps.Polygon({
            auto_id: i,
            id: id,
            name: polName,
            paths: arr,
            Source: source_d,
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillOpacity: 0.35,
            zIndex: 10
        }));
        console.log(id+" polygons name="+polName);
        polygons[polygons.length - 1].setMap(map);

       }else if (source_d == "polyline") {  
             polyline.push(new google.maps.Polyline({
                auto_id: i,
                id: id,
                name: polName,
                paths: arr,
                Source: source_d,
                strokeOpacity: 0.8,
                strokeWeight: 2,
                 zIndex: 11
            }));
            polyline[polyline.length - 1].setMap(map);
           console.log(id+" polyline  name="+polName);
      }  

    }
}

</script>

Answer 1

google.maps.PolylineOptions对象没有paths属性，仅对google.maps.PolygonOptions对象有效。

变化：

polyline.push(new google.maps.Polyline({
    auto_id: i,
    id: id,
    name: polName,
    paths: arr,
    Source: source_d,
    strokeOpacity: 0.8,
    strokeWeight: 2,
    zIndex: 11
  }));

要：

polyline.push(new google.maps.Polyline({
    auto_id: i,
    id: id,
    name: polName,
    path: arr,
    Source: source_d,
    strokeOpacity: 0.8,
    strokeWeight: 2,
    zIndex: 11
  }));

proof of concept fiddle

代码段

$(function() {
  initialize();
});

function initialize() {
  var centerPoint = new google.maps.LatLng(13.09084815771412, 80.26878878474236);
  var mapOptions = {
    zoom: 14,
    center: centerPoint,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: true,
    mapTypeControl: false
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var arr = new Array();
  var polygons = [];
  var polyline = [];
  var bounds = new google.maps.LatLngBounds();
  var coordinates = [];
  var marker = new google.maps.Marker;
  var getBounds;


  var data = '[{"name":"Arumbakkam","id":"1620","source":"polygon","latlng":[{"lat":"13.080648730311745","lng":"80.2668146789074"},{"lat":"13.081819177841483","lng":"80.27453944087029"},{"lat":"13.086208306590859","lng":"80.27172848582268"},{"lat":"13.09084815771412","lng":"80.26878878474236"}]},{"name":"Chetpet","id":"1621","source":"polyline","latlng":[{"lat":"13.119271","lng":"80.095053"},{"lat":"13.117557","lng":"80.095203"},{"lat":"13.116408","lng":"80.101683"}]}]';
  var jsonData = JSON.parse(data);
  for (var i = 0; i < jsonData.length; i++) {
    var polName = jsonData[i].name;
    var id = jsonData[i].id;
    var latArr = jsonData[i].latlng;
    var source_d = jsonData[i].source;
    arr = [];
    for (j = 0; j < latArr.length; j++) {
      var lat = latArr[j].lat;
      var lng = latArr[j].lng;

      arr.push(new google.maps.LatLng(parseFloat(lat), parseFloat(lng)));
      bounds.extend(arr[arr.length - 1]);
    }

    if (source_d == "polygon") {

      polygons.push(new google.maps.Polygon({
        auto_id: i,
        id: id,
        name: polName,
        paths: arr,
        Source: source_d,
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillOpacity: 0.35,
        zIndex: 10
      }));
      console.log(id + " polygons name=" + polName);
      polygons[polygons.length - 1].setMap(map);

    } else if (source_d == "polyline") {
      polyline.push(new google.maps.Polyline({
        auto_id: i,
        id: id,
        name: polName,
        path: arr,
        Source: source_d,
        strokeOpacity: 0.8,
        strokeWeight: 2,
        zIndex: 11
      }));
      polyline[polyline.length - 1].setMap(map);
      console.log(id + " polyline  name=" + polName);
    }

  }
  map.fitBounds(bounds);
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

如何使用谷歌地图api v3显示多边形和多边形

1 个答案: