Google Map infowindow无法打开 [英] Google Map infowindow not opening

问题描述

我在Rails应用中使用Google地图，但遇到一些困难。
我想在用户点击一个圆圈时显示一个infowindow。当他点击一个标记时它工作正常，但现在我的圈子无法使用。

这是我的代码：

  markers_json =<％= raw @circles％>; 
 var map; 
 var infoWindow; 
 
 buildMap = function（）{
 var mapStyle = [
 // https://snazzymaps.com/style/70/unsaturated-browns 
 {elementType ： 几何， 造型器：[{ 色相： ＃ff4400}，{ 饱和： -  68}，{ 亮度： -  4}，{ 伽马：0.72}]}， { 类型特征： 道路， 的ElementType： labels.icon}，{ 类型特征： landscape.man_made， 的ElementType： 几何， 造型器：[{ 色相： ＃0077ff }，{ 伽马 ：3.1}]}，{ 类型特征 ： 水  造型器：[{ 色相： ＃00CCFF}，{ 伽马：0.44}，{饱和度 ： -  33}]}，{ 类型特征 ： poi.park  造型器：[{ 色相： ＃44ff00}，{ 饱和： -  23}]}，{ 类型特征： 水， 的ElementType： labels.text.fill， 造型器：[{ 色相： ＃007fff}，{ 伽马：0.77}，{ 饱和：65}， { 亮度：99}]}，{ 类型特征： 水， 的ElementType： labels.text.stroke， 造型器：[{ 伽马：0.11}，{ 重量：5.6 }，{ 饱和：99}，{ 色相： ＃0091ff}，{ 亮度： -  86}]}，{ 类型特征： transit.line， 的ElementType： 几何 造型器：[{ 亮度： -  48}，{ 色相： ＃ff5e00}，{ 伽马：1.2}，{ 饱和： -  23}]}，{FE atureType ： 运输， 的ElementType： labels.text.stroke， 造型器：[{ 饱和： -  64}，{ 色相： ＃ff9100}，{ 亮度：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'）; 
} 
 
}）; 
 
}; 
 $ b $ function addInfoWindow（marker，content）{
 var infoWindow = new google.maps.InfoWindow（{$ b $ content：content 
}）; 
 
 google.maps.event.addListener（marker.serviceObject，'click'，function（）{
i = infoWindow.open（map，marker.serviceObject）; 
 console。 log（i）; 
}）; 
} 
  

当我尝试打开infowindow时，一次又一次出现此错误：
未捕获TypeError：无法读取undefined（...）

的属性'get' code> i = infoWindow.open（map.serviceObject，marker.serviceObject）;
但现在没有任何反应，我甚至没有错误信息。

我真的不知道我还能做什么......请帮我一下吗？

/ div>

第二个参数 infoWindow.open（）; 必须是一个MVC对象，其中位置 google.maps.LatLng

A google.maps。标记没有位置 -property，但是 google.maps.Circle doesn' t

使用 setOptions 来设置 map 和 position （例如圆圈的中心）：

  infoWindow。组选项（{
 map：map.serviceObject，
 position：marker.serviceObject.getCenter（）
}）; 
  

I'm using Google Maps in my Rails app and I face some difficulties. I want to show an infowindow when a user clicks on a circle. It works fine when he clicks on a marker but now that I have circles it does not work.

Here is my code:

  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);
    });
  }

I have this error again and again when I try to open the infowindow: Uncaught TypeError: Cannot read property 'get' of undefined(…)

So I tried doing i = infoWindow.open(map.serviceObject, marker.serviceObject); but now nothing happens, I even don't have an error message.

I really don't know what else I can do... Could you please help me?

解决方案

the 2nd argument of infoWindow.open(); has to be an MVC-Object with a position-property of type google.maps.LatLng

A google.maps.Marker does have a position-property, but a google.maps.Circle doesn't.

Use setOptions to set map and position(e.g. center of the circle) of the infowindow:

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

这篇关于Google Map infowindow无法打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！