Question

是否可以在用户点击地图的位置打开信息窗口？

这就是我现在所拥有的：

  OnClickMap(event) {
    const map = this.state.map;
    const title = this.props.createNewMarkerTitle;
    const marker = {
      latLng: {
        lat: event.latLng.lat(),
        lng: event.latLng.lng()
      }
    };

    const markerOnMap = new google.maps.Marker({
      position: marker.latLng,
      map: map,
      title: title
    });

    const infowindow = new google.maps.InfoWindow();
    const content = document.createElement('div');
    ReactDOM.render(this.renderCreateNewMarkerInfoWindow(), content);
    infowindow.setContent(content);

    markerOnMap.addListener('click', function() {
      infowindow.open(map, markerOnMap);
    });
  }

我不确定如何点击地图，并在我点击的位置打开信息窗口。我试图通过移除标记来解决问题，只是打开infowindow，但是由于我不确定如何将latLng传递给它，因此导致左上方的窗口打开。

这可能吗？否则，我该如何设置以下内容：

click the map -> 
creates a marker -> 
immediately opens infowindow (instead of having to click the marker to open it)

Answer 1

要在地图上点击的位置（没有标记）打开InfoWindow，您需要设置InfoWindow的.position属性（并且不要包含可选的{{}在anchor电话中1}}。

.open

proof of concept fiddle

代码段

＆＃13;

map.addListener('click', function(evt) {
  var infowindow = new google.maps.InfoWindow();
  infowindow.setPosition(evt.latLng);
  var content = evt.latLng.toUrlValue(6);
  infowindow.setContent(content);
  infowindow.open(map);
});

＆＃13;

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
    });
  map.addListener('click', function(evt) {
    var infowindow = new google.maps.InfoWindow();
    infowindow.setPosition(evt.latLng);
    var content = evt.latLng.toUrlValue(6);
    infowindow.setContent(content);
    infowindow.open(map);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

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

＆＃13;

使用谷歌地图JS api，如何打开用户点击地图的信息窗口？这可能吗？

1 个答案: