AngularJS Google 地图指令 - 在标记单击事件上显示信息窗口时出错

Question

我正在开发一个 AgngularJs Google 地图应用程序（使用 AngularJS Google 地图指令）以使用 Marker 显示当前位置并在 Info[=31= 中显示坐标] 单击标记图标时。

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

但信息Window 仅在前两次单击“标记”图标时显示。 Google Chrome 控制台 Window 为每个标记点击显示此错误消息：

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)

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

Answer 1

信息 window 内容需要稍微不同地指定：

1) 首先我们需要引入一个属性来存储信息 window 内容（infoWinOptions 对象不应该用于该目的，因为无法通过 [= 设置内容ui-gmap-window 指令的 12=] 属性），例如：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

AngularJS Google 地图指令 - 在标记单击事件上显示信息窗口时出错

AngularJS Google Map Directive - Error while displaying InfoWindow on Marker Click event

google-maps

angularjs

angularjs-google-maps