Question

我正在开发一个AgngularJs谷歌地图应用程序（使用AngularJS谷歌地图指令），使用标记显示当前位置，并在点击标记图标时显示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 }
                                  }
                      }
                  }
              })
          }
      })

但只有前两次点击Marker图标才会显示InfoWindow。 Google Chrome控制台窗口为每个标记点击显示此错误消息：

未捕获的TypeError：无法设置未定义的属性“不透明度”

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

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

Answer 1

需要以不同的方式指定信息窗口内容：

1）首先我们需要引入一个属性来存储信息窗口内容（infoWinOptions对象不应该用于此目的，因为无法通过options ui-gmap-window属性设置内容指令），例如：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 Map指令 - 在标记点击事件

1 个答案: