代码之家  ›  专栏  ›  技术社区  ›  Valachio

Google Maps API-向数据层中的点添加任意数据

  •  -1
  • Valachio  · 技术社区  · 7 年前
    var schoolLayer = new google.maps.Data();
    schoolLayer.setMap(map);
    let latLng = new google.maps.LatLng(coords1, coords2);
    let school = new google.maps.Data.Point(latLng);
    schoolLayer.add({geometry: school});
    

    我正在建造一个学校层。我通过向数据层添加点来实现这一点。我很容易就添加了这些要点。我的问题是,如何向点添加任意数据,例如学校名称?

    我试着去做 schoolLayer.add({geometry: school, school_name: 'Hello Elementary School'}) 但它不起作用。

    1 回复  |  直到 7 年前
        1
  •  1
  •   geocodezip    7 年前

    将任意数据放入特征的属性字段中。

    let latLng = new google.maps.LatLng(37.4419, -122.1419);
    let school = new google.maps.Data.Point(latLng);
    schoolLayer.add({
      geometry: school,
      properties: {
        name: "school1"
      }
    });
    

    然后,您可以在事件侦听器中获得它,如下所示:

    google.maps.event.addListener(schoolLayer, 'click', function(e) {
      infowindow.setContent(e.feature.getProperty("name"));
      infowindow.setOptions({
        pixelOffset: new google.maps.Size(0, -40)
      })
      infowindow.setPosition(e.latLng);
      infowindow.open(map);
    })
    

    proof of concept fiddle

    screenshot of resulting map

    function initialize() {
      var map = new google.maps.Map(
        document.getElementById("map_canvas"), {
          center: new google.maps.LatLng(37.4419, -122.1419),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
      var infowindow = new google.maps.InfoWindow();
      var schoolLayer = new google.maps.Data();
      schoolLayer.setMap(map);
      let latLng = new google.maps.LatLng(37.4419, -122.1419);
      let school = new google.maps.Data.Point(latLng);
      schoolLayer.add({
        geometry: school,
        properties: {
          name: "school1"
        }
      });
      let latLng2 = new google.maps.LatLng(37.445, -122.145);
      let school2 = new google.maps.Data.Point(latLng2);
      schoolLayer.add({
        geometry: school2,
        properties: {
          name: "school2"
        }
      });
      google.maps.event.addListener(schoolLayer, 'click', function(e) {
        infowindow.setContent(e.feature.getProperty("name"));
        infowindow.setOptions({
          pixelOffset: new google.maps.Size(0, -40)
        })
        infowindow.setPosition(e.latLng);
        infowindow.open(map);
      })
    }
    google.maps.event.addDomListener(window, "load", initialize);
    html,
    body,
    #map_canvas {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <div id="map_canvas"></div>