AngularJS Google Map Directive - 在标记单击事件上显示 InfoWindow 时出错

Question

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

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>

控制器：

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

但信息窗口仅在前两次单击标记图标时显示。 Google Chrome 控制台窗口在每次标记点击时都会显示此错误消息：

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

在 Object.maybeRepaint (angular-google-maps.min.js:7)
在 .Me。 (angular-google-maps.min.js:7)
在 Object..z.trigger (js:95)
在 Ke._.k.trigger (js:113)
在 .JF。 (maps.googleapis.com/maps-api-v3/api/js/26/10/infowindow.js:3)
在 Object..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)

我不确定这是否是处理标记单击事件的正确方法。请帮我解决这个问题。

Answer 1

信息窗口内容需要稍微不同：

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

2) 然后像这样绑定它：

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

Demo