AngularJS Google Map指令 - 在Marker Click事件上显示InfoWindow时出错 [英] AngularJS Google Map Directive - Error while displaying InfoWindow on Marker Click event

问题描述

我正在开发一个AgngularJs Google Map应用程序（使用AngularJS Google Map Directive）来使用Marker显示当前位置，并在单击Marker图标时在InfoWindow中显示坐标。

HTML：

 < ui-gmap-google-map center =map.centerzoom =map .zoomoptions =options> 
 < / ui-gmap-marker> 
< ui-gmap-window show =falsecoords =vm.infoWin.coordsoptions =vm.infoWin.infoWinOptions> 
< / ui-gmap-window> 
< / ui-gmap-google-map> 
  

控制器：

  uiGmapGoogleMapApi.then（function（maps）{
 if（navigator.geolocation）{
 navigator.geolocation.getCurrentPosition（function（position）{
 $ scope.map = { center：{latitude：position.coords.latitude，longitude：position.coords.longitude}，zoom：15}; 
 $ scope.options = {draggable：false，scrollwheel：false}; // Map 
 
 vm.marker = {
 id：1，
 coords：{
 latitude：position.coords.latitude，
 longitude：position.coords.longitude 
 $，
 options：{
 draggable：false，
 // labelContent：'You are here'，
 // labelClass：marker-labels
 }，
 events：{
 click：function（）{
 showInfoWindow（）; 
} 
 } 
}; 
 
函数showInfoWindow（）{
 vm.infoWin = {
 coords：{
 latitude：position.coords.latitude，
 longitude：position.coords .longitude 
}，
 
 infoWinOptions：{
 visible：true，
 content：'Latitude：'+ position.coords.latitude +'，'+'Longitude ：'+ position.coords.longitude，
 pixelOffset：{height：-32，width：0} 
} 
} 
} 
}）
 } 
  

但InfoWindow只显示Marker图标的前两次点击。 Google Chrome控制台窗口显示每个标记单击此错误消息：
$ b

未捕获的类型错误：无法设置未定义的属性不透明度


at Object.maybeRepaint（angular-google-maps.min.js：7）

at .Me。 （angular-google-maps.min.js：7）

在Object。 .z.trigger（js：95）

在Ke._。在j.JF上的
（$ j $：$）。 （maps.googleapis.com/maps-api-v3/api/js/26/10/infowindow.js:3）
在对象处为
。 .z.trigger（js：95 ）__JF的
。 （maps.googleapis.com/maps-api-v3/api/js/26/10/util.js:133）
.Zs处的
。 .k.Jh （maps.googleapis.com/maps-api-v3/api/js/26/10/common.js:204）

我不确定这是否是处理Marker Click事件的正确方法。请帮助我解决这个问题。

解决方案

信息窗口内容需要指定有点不同：

1）首先我们需要引入一个属性来存储信息窗口的内容（ infoWinOptions >对象不应该用于这个目的，因为内容不能用通过 ui-gmap-window 指令的选项属性来设置，例如： vm .marker.content

2）然后像这样绑定它：

 < ui-gmap-window coords =vm.infoWin.coordsshow =falseoptions =vm.infoWin.infoWinOptions> 
< span> {{vm.marker.content}}< /跨度> 
< / ui-gmap-window> 
  

演示

I am developing a AgngularJs Google Map application (using AngularJS Google Map Directive) to show the current location using Marker and display the coordinates in an InfoWindow when the Marker icon is clicked.

HTML:

 <ui-gmap-google-map center="map.center" zoom="map.zoom" options="options">
    <ui-gmap-marker coords="vm.marker.coords" options="vm.marker.options" events="vm.marker.events" idkey="vm.marker.id">
    </ui-gmap-marker>
    <ui-gmap-window show="false" coords="vm.infoWin.coords" options="vm.infoWin.infoWinOptions">
    </ui-gmap-window>
 </ui-gmap-google-map>

Controller:

uiGmapGoogleMapApi.then(function (maps) {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
      $scope.map = { center: { latitude: position.coords.latitude, longitude: position.coords.longitude }, zoom: 15 };
      $scope.options = { draggable: false, scrollwheel: false }; //Map

      vm.marker = {
         id: 1,
         coords: {
                   latitude: position.coords.latitude,
                   longitude: position.coords.longitude
                 },
         options: {
                   draggable: false,
                   //labelContent: 'You are here',
                   //labelClass: "marker-labels"
                  },
         events: {
                   click: function () {
                    showInfoWindow();
                 }
           }
     };  

     function showInfoWindow() {
         vm.infoWin = {
                  coords: {
                             latitude: position.coords.latitude,
                             longitude: position.coords.longitude
                          },

                  infoWinOptions: {
                                     visible: true,
                                     content: 'Latitude: ' + position.coords.latitude + ', ' + 'Longitude: ' + position.coords.longitude,
                                     pixelOffset: { height: -32, width: 0 }
                                  }
                      }
                  }
              })
          }
      })

But the InfoWindow is displayed only for first two clicks on the Marker icon. Google Chrome Console Window is showing this error message for every Marker Click:

Uncaught TypeError: Cannot set property 'opacity' of undefined

at Object.maybeRepaint (angular-google-maps.min.js:7)
at .Me. (angular-google-maps.min.js:7)
at Object..z.trigger (js:95)
at Ke._.k.trigger (js:113)
at .JF. (maps.googleapis.com/maps-api-v3/api/js/26/10/infowindow.js:3)
at Object..z.trigger (js:95)
at _.JF. (maps.googleapis.com/maps-api-v3/api/js/26/10/util.js:133)
at .Zs..k.Jh (maps.googleapis.com/maps-api-v3/api/js/26/10/common.js:204)

I am not sure whether this is the right way to handle the Marker Click event. Please help me to fix this issue.

解决方案

Info window content needs to be specified a bit differently:

1) first we need to introduce a property to store info window content (infoWinOptions object should not be used for that purpose since content could not be set via options attribute of ui-gmap-window directive ), for example: vm.marker.content

2) and then bind it like this:

<ui-gmap-window coords="vm.infoWin.coords" show="false" options="vm.infoWin.infoWinOptions">
  <span>  {{vm.marker.content}}</span>
</ui-gmap-window> 

Demo

这篇关于AngularJS Google Map指令 - 在Marker Click事件上显示InfoWindow时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！