angularjs 谷歌地图 - 带窗口的标记 - 信息窗口未显示

2024-03-05

尝试使用以下方式获取应用程序角度谷歌地图 with:
- 通过多个标记markers指示
- 通过的单个信息窗口window指示

我已经了解了 API 和 github 网站上的多个已解决的问题,但就是无法让它工作......:-/

jsfiddle http://jsfiddle.net/goredwards/pd27yoe0/

为简单起见,我手动声明标记(并且它们正确显示):

$scope.markers = [
    {
        id: 0,
        coords: {
            latitude: 37.7749295,
            longitude: -122.4194155
        },
        data: 'restaurant'
    },
    {
        id: 1,
        coords: {
            latitude: 37.79,
            longitude: -122.42
        },
        data: 'house'
    },
    {
        id: 2,
        coords: {
            latitude: 37.77,
            longitude: -122.41
        },
        data: 'hotel'
    }
];

html 看起来像:

<body ng-app="app">
    <div class="angular-google-map-container" ng-controller="MainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
            <ui-gmap-window coords="markers.coords" show="windowOptions.show" closeClick="closeClick()">
                <div>Hello</div>
            </ui-gmap-window>
            <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
            </ui-gmap-markers>
        </ui-gmap-google-map>
    </div>
</body>

我正在应用onClick函数到markers使用此代码的数组

$scope.addMarkerClickFunction = function(markersArray){
    angular.forEach(markersArray, function(value, key) {
        value.onClick = function(){
                $scope.onClick(value.data);
            };
    });
}; 

The marker click函数看起来像

$scope.windowOptions = {
    show: false
};

$scope.onClick = function(data) {
    $scope.windowOptions.show = !$scope.windowOptions.show;
    console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
    console.log('This is a ' + data);
};

$scope.closeClick = function() {
    $scope.windowOptions.show = false;
};

The $scope.onClick()功能似乎正在运行marker单击,因为控制台输出了预期的内容 - 并且$scope.windowOptions.show值在之间切换true and false...

我想这就是我连接的方式windowhtml 到控制器数组和函数?任何帮助表示赞赏。

P.S.API 文档examples http://angular-ui.github.io/angular-google-maps/#!/api似乎已经过时了,因为他们不使用show在这个例子中而是options.visible显示和隐藏信息窗口 - 但然后所有issues https://github.com/angular-ui/angular-google-maps/issues/772/ 示例建议使用show反而 ?


我知道这是一个旧帖子。

然而,这些天我一直在努力尝试做到这一点,而且,接受的答案的 jsfiddle 已损坏,并且不适用于最新版本的angular-google-maps指示。所以,我决定分享一个工作中的插件,希望它可以帮助其他人。

笨蛋在这里 http://plnkr.co/edit/HUYHuAUgUlUhDd1MRf3D?p=preview

此版本渲染多个标记,但仅渲染一个窗口。同一时间只能打开一个窗口。

这是根据官方网站的建议常见问题解答部分 http://angular-ui.github.io/angular-google-maps/#!/faq: See 如何一次只打开一个窗口?

html

<ui-gmap-google-map center="map.center" zoom="map.zoom">

  <ui-gmap-window 
    show="map.window.show" 
    coords="map.window.model" 
    options="map.window.options" 
    closeClick="map.window.closeClick()"
    templateUrl="'infowindow.tpl.html'" 
    templateParameter="map.window">
  </ui-gmap-window>

  <ui-gmap-markers  
    models="map.markers" 
    coords="'self'"  
    events="map.markersEvents"
    options="'options'">
  </ui-gmap-markers>

</ui-gmap-google-map>

js

$scope.map = {
  center: {
    latitude: 39.5925511,
    longitude: 2.633202
  },
  zoom: 14,
  markers: [],  // Markers here
  markersEvents: {
    click: function(marker, eventName, model) {
      $scope.map.window.model = model;
      $scope.map.window.show = true;
    }
  },
  window: {
    marker: {},
    show: false,
    closeClick: function() {
      this.show = false;
    },
    options: {} 
  }
};

希望能帮助到你。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

angularjs 谷歌地图 - 带窗口的标记 - 信息窗口未显示 的相关文章

随机推荐