谷歌地图信息窗口打不开答案

【问题标题】：Google Map infowindow not opening谷歌地图信息窗口打不开
【发布时间】：2016-02-17 12:07:19
【问题描述】：

我在 Rails 应用程序中使用 Google 地图，但遇到了一些困难。当用户点击一个圆圈时，我想显示一个信息窗口。当他点击一个标记时它工作正常，但现在我有圆圈它不起作用。

这是我的代码：

  markers_json = <%= raw @circles %>;
  var map;
  var infoWindow;

  buildMap = function(){
    var mapStyle = [
      // https://snazzymaps.com/style/70/unsaturated-browns
      {"elementType":"geometry","stylers":[{"hue":"#ff4400"},{"saturation":-68},{"lightness":-4},{"gamma":0.72}]},{"featureType":"road","elementType":"labels.icon"},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"hue":"#0077ff"},{"gamma":3.1}]},{"featureType":"water","stylers":[{"hue":"#00ccff"},{"gamma":0.44},{"saturation":-33}]},{"featureType":"poi.park","stylers":[{"hue":"#44ff00"},{"saturation":-23}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"hue":"#007fff"},{"gamma":0.77},{"saturation":65},{"lightness":99}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"gamma":0.11},{"weight":5.6},{"saturation":99},{"hue":"#0091ff"},{"lightness":-86}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"lightness":-48},{"hue":"#ff5e00"},{"gamma":1.2},{"saturation":-23}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"saturation":-64},{"hue":"#ff9100"},{"lightness":16},{"gamma":0.47},{"weight":2.7}]}
    ];

    handler = Gmaps.build('Google');
    map = handler.buildMap({
      internal: {id: 'map'},
      provider: {
        //disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: mapStyle,
        scrollwheel: false
      }
    }, function(){
      var circles = handler.addCircles(markers_json, {strokeWeight: 1, strokeColor: '#aaa'});
      handler.bounds.extendWith(circles);
      handler.fitMapToBounds();

      for (var i = 0; i <  circles.length; ++i) {
        var marker = circles[i];
        //google.maps.event.addListener(marker.serviceObject, 'click', onMarkerClick(marker));
        addInfoWindow(marker, 'hey');
      }

    });

  };

  function addInfoWindow(marker, content) {
    var infoWindow = new google.maps.InfoWindow({
      content: content
    });

    google.maps.event.addListener(marker.serviceObject, 'click', function () {
      i = infoWindow.open(map, marker.serviceObject);
      console.log(i);
    });
  }

当我尝试打开信息窗口时，我一次又一次地遇到此错误： Uncaught TypeError: Cannot read property 'get' of undefined(…)

所以我尝试做i = infoWindow.open(map.serviceObject, marker.serviceObject); 但现在什么都没有发生，我什至没有错误消息。

我真的不知道我还能做什么...你能帮帮我吗？

【问题讨论】：

标签： javascript ruby-on-rails google-maps gmaps4rails

【解决方案1】：

infoWindow.open(); 的第二个参数必须是具有 position-属性类型为 google.maps.LatLng 的 MVC 对象

google.maps.Marker 确实具有 position 属性，但 google.maps.Circle 没有。

使用setOptions设置信息窗口的map和position（例如圆心）：

infoWindow.setOptions({
  map:      map.serviceObject, 
  position: marker.serviceObject.getCenter()
});

【讨论】：