在数据层上手动打开 InfoWindow ( GeoJSON )

Question

我正在尝试触发对标记的点击，但在将数据传递到 google.maps.event.trigger() 时遇到问题。我从 map.data 获取一个功能并将其传递给 google.maps.event.trigger()，但信息窗口未打开。

google.maps.event.trigger(map.data, 'click') 有效，但这并不针对特定标记。

任何建议或解决方案都会有所帮助。

谢谢

function initialize() {

        var mapCanvas = document.getElementById('map');
        var mapOptions = {
          center: new google.maps.LatLng(-16.166667, 33.60000000000002),
          zoom: 4,
          mapTypeId: google.maps.MapTypeId.HYBRID
        }
        map = new google.maps.Map(mapCanvas, mapOptions)

        map.data.loadGeoJson('locations.geojson');

        function setProps(){
          map.data.setStyle(function(feature) {
              var color = false;
              if (feature.getProperty('propVisible')) {
                color = feature.getProperty('propVisible');
              }
              return {
                icon: feature.getProperty('icon').iconUrl,
                category: feature.getProperty('projectCat'),
                visible: color,
              };

            });
        }
        setProps();

        var infoWindow = new google.maps.InfoWindow({pixelOffset: new google.maps.Size(0, -50)});
        map.data.addListener('click', function(event) {
          console.log(event);

          map.setCenter(event.latLng);
          map.setZoom(15);



          var projectTitle = event.feature.getProperty("projectTitle");
          var imgStr = event.feature.getProperty("projectImages");
          var projectImages = new Array();
          projectImages = imgStr.split(',');
          var projectCat = event.feature.getProperty("projectCat");
          var projectPhase = event.feature.getProperty("projectPhase");
          var projectSDate = event.feature.getProperty("projectSDate");
          var projectEDate = event.feature.getProperty("projectEDate");
          var projectDeveloper = event.feature.getProperty("projectDeveloper");
          var projectInvestor = event.feature.getProperty("projectInvestor");
          var projectTeam = event.feature.getProperty("projectTeam");
          var projectTenants = event.feature.getProperty("projectTenants");
          var projectWebsite = event.feature.getProperty("projectWebsite");


          var thePopup = '<div class="leaflet-popup-content-wrapper">';
          thePopup += '<h5>'+projectTitle+'</h5>';
          for (i = 0; i < projectImages.length; i++) {
            thePopup += '<img src="' + projectImages[i] + '" alt="" style="width:100px;height:100px;cursor:pointer;" data-lity />';
          }
          thePopup += '<div>Project Category: '+projectCat+'</div>';
          thePopup += '<div>Project Phase: ' + projectPhase + '</div>';
          thePopup += '<div>Start Date: ' + projectSDate + '</div>';
          thePopup += '<div>End Date: ' + projectEDate + '</div>';
          thePopup += '<div>Project Developer: ' + projectDeveloper + '</div>';
          thePopup += '<div>Project Investor: ' + projectInvestor + '</div>';
          thePopup += '<div>Professional Team: ' + projectTeam + '</div>';
          thePopup += '<div>Key Tenants: ' + projectTenants + '</div>';
          thePopup += '<div>Website: <a href="' + projectWebsite + '" target="_blank">Click Here</a></div>';
          thePopup += '</div>';

          //console.log(event);
          infoWindow.setContent(thePopup);
          infoWindow.setPosition(event.latLng);
          infoWindow.open(map);
        });

        var listings = document.getElementById('film_roll');
        setTimeout(function() {

          map.data.forEach(function (feature) {

            var projectTitle = feature.getProperty('projectTitle');
            var listIcon = feature.getProperty('listIcon');
            var projectCountry = feature.getProperty('projectCountry');

            var listing = listings.appendChild(document.createElement('div'));
            listing.className = 'item col-xs-2';

            var notifImg = listing.appendChild(document.createElement('div'));
            var notifMeta = listing.appendChild(document.createElement('div'));
            var notifIcon = notifImg.appendChild(document.createElement('img'));
            var link = notifMeta.appendChild(document.createElement('a'));
            var Noticountry = notifMeta.appendChild(document.createElement('div'));
                link.href = '#';
                link.className = 'title';

            notifImg.className = 'notification-img';
            notifMeta.className = 'notification-meta';
            notifIcon.src = notifImg.innHTML = listIcon;
            link.innerHTML = projectTitle;
            Noticountry.innerHTML = projectCountry;

          });
          fr = new FilmRoll({ container: '#film_roll', pager: false, next: false, prev: false, hover: false, start_height: '40px', configure_load: true, vertical_center: true });
        }, 500);

        filterMarkers = function (category) {
          map.setZoom(4);
          infoWindow.close();
          map.data.forEach(function (feature) {

            if (feature.getProperty('projectCat') == category || category == 'all') {
                feature.setProperty('propVisible', true);
            }
            else {
                feature.setProperty('propVisible', false);
            }
          });
          setProps();
        }

        showPopupbox = function (link) {
          var popupID = link.getAttribute("data-id");
          var ourMarker = map.data.getFeatureById(popupID);
          //console.log(map.data);
          google.maps.event.trigger(ourMarker,'click');

        }

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

<a id="map-link" data-id="35" onclick="showPopupbox(this);">test</a>

Answer 1

google.maps.Data.MouseEvent-callback 的预期参数是具有单个属性的对象：feature（包含相关功能）。

为map.data 触发click 事件并将此对象作为3 个参数传递给触发器：

 google.maps.event.trigger(map.data,'click',{feature:ourMarker}); 

要在回调中获取特征（标记）的位置，请使用

event.feature.getGeometry().get()

（其中事件是传递给回调的参数）

---

演示：

function initialize() {


  var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 5,
      center: new google.maps.LatLng(1, 1)
    }),
    infoWindow = new google.maps.InfoWindow({
      pixelOffset: new google.maps.Size(0, -36)
    });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
    document.getElementById('ctrl')
  );

  map.data.addListener('click', function(event) {
    var feature = event.feature;
    infoWindow.setOptions({
      position: feature.getGeometry().get(),
      map: map,
      content: 'my id is ' + feature.getId()
    });
  });

  map.data.addGeoJson({
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "id": 35,
      "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
      }
    }, {
      "type": "Feature",
      "id": 36,
      "geometry": {
        "type": "Point",
        "coordinates": [1, 1]
      }
    }, {
      "type": "Feature",
      "id": 37,
      "geometry": {
        "type": "Point",
        "coordinates": [2, 2]
      }
    }]
  });
  window.showPopupbox = function(link) {
    var popupID = link.getAttribute("data-id");
    var ourMarker = map.data.getFeatureById(popupID);

    google.maps.event.trigger(map.data, 'click', {
      feature: ourMarker
    });

  }
}

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

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
a {
  cursor: pointer;
}
ul {
  background: #fff;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>
<ul id="ctrl">
  <li><a data-id="35" onclick="showPopupbox(this);">35</a>
  </li>
  <li><a data-id="36" onclick="showPopupbox(this);">36</a>
  </li>
  <li><a data-id="37" onclick="showPopupbox(this);">37</a>
  </li>
  <ul>