个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 23:36:36 26 4
gpt4 key购买 nike

尝试使用 angular-google-maps 获取应用:
- 通过 markers 指令实现多个标记
- 通过 window 指令的单个信息窗口

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

jsfiddle

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

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

标记点击函数看起来像

$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;
};

$scope.onClick() 函数似乎正在处理 marker 点击，因为控制台输出了预期的内容 - 以及 $scope.windowOptions。显示值在true和false之间切换...

我认为这是我将 window html 连接到 Controller 数组和函数的方式？如有任何帮助，我们将不胜感激。

P.S. API 文档 examples似乎已经过时了，因为他们在示例中不使用 show 而是使用 options.visible 来显示和隐藏信息窗口 - 但随后所有 issues/示例建议使用 show 代替？

最佳答案

我知道这是一篇旧帖子。

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

Plunker here

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

根据官网建议FAQ Section :请参阅如何一次只打开一个窗口？

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: {} 
  }
};

希望有帮助。

关于angularjs 谷歌地图 - 带窗口的标记 - 信息窗口未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28291980/

26 4 0
文章推荐： spring-mvc - 我可以在一个应用程序中使用 Spring MVC 和 Spring WS 吗？
文章推荐： filtering - 尝试过滤来自加速度计和陀螺仪的(大量)噪声
文章推荐： wordpress - 怎么修？ WordPress wp-markdown插件损坏的语法-突出显示的插件帖子？
文章推荐： interface - FPGA 上的输入信号边沿检测
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com