0

我正在开发一个 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 控制台窗口为每个标记单击显示此错误消息：

未捕获的类型错误：无法在 .Me

的 Object.maybeRepaint (angular-google-maps.min.js:7)
处设置未定义的属性“不透明度” 。(angular-google-maps.min.js:7)
在对象。.z.trigger (js:95)
在 Ke._.k.trigger (js:113)
在.JF。（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 事件的正确方法。请帮我解决这个问题。

4

1 回答 1

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>

演示

于 2016-10-27T20:56:48.580 回答