单击角度谷歌地图中的多边形时如何显示窗口

How do you show a window when clicking polygons in angular google maps?

本文关键字：何显示 显示 窗口 谷歌地图 多边形 单击      更新时间：2023-09-26

>每当单击地图上的某个区域时，它应该会打开该区域的窗口，但事实并非如此。

预期成果如下：

这就是我希望它的样子。

这是我的网页：

<ui-gmap-polygon static="true" ng-repeat="p in regions track by p.id" path="p.path" visible="p.visible" stroke="p.stroke" fill="p.fill" events="events" clickable="true" >
</ui-gmap-polygon>
<ui-gmap-windows models="markers" show="show">
  <!-- Window Code -->
</ui-gmap-windows>

下面是多边形的 $scope.events.click 函数：

for(var i = 0; i < $scope.markers.length; i++) {
  //console.log(model.path[0].id + " == " + $scope.markers[i].id);
  if(model.path[0].id == $scope.markers[i].id) {
    console.log("Showing window " + model.path[0].id);
    $scope.markers[i].show = true;
  }
  else
  { // hides other windows
    $scope.markers[i].show = false;
  }
}

需要注意的事情。日志语句确实会显示，只是没有显示窗口。这是一个普伦克：普伦克

我想你想添加多个多边形，所以把你的html改成：

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
    <ui-gmap-polygons static="true" models="regions" path="'path'" visible="true" stroke="'stroke'" fill="'fill'" events="events" clickable="true" >
    </ui-gmap-polygons>
    <ui-gmap-windows models="markers" show="'show'" coords="'coords'">
        <div ng-non-bindable>Test</div>
    </ui-gmap-windows>
</ui-gmap-google-map>

您需要定义将值定义为字符串的属性，例如：show="'show'" coords="'coords'"

我添加了第二个模型，只是因为我想测试它有多个值。所以我的控制器看起来像这样：

...
$scope.regions = [
    {
        id: 0,
        path: [
          {latitude: 39.13773735160255, longitude: -86.51972115039825, id: 0},
          {latitude: 39.137606286024926, longitude: -86.51961386203766},
          {latitude: 39.137664537422864, longitude: -86.51949316263199},
          {latitude: 39.13779768329436, longitude: -86.51960045099258}
        ]
      },
      {
        id: 1,
        path: [
          {latitude: 39.13673735160255, longitude: -86.51972115039825, id: 1},
          {latitude: 39.136606286024926, longitude: -86.51961386203766},
          {latitude: 39.136664537422864, longitude: -86.51949316263199},
          {latitude: 39.13679768329436, longitude: -86.51960045099258}
        ]
      }
    ]
    $scope.markers= [{
        id: 0,
        show: true,
        coords: { //you need an object containing latitude and longitude, so i wrapped these properties into coords
           latitude: 39.13773735160255,
           longitude: -86.51972115039825
        }
      },{
        id: 1,
        show: true,
        coords: {
           latitude: 39.13673735160255,
           longitude: -86.51972115039825
        }
      }
      ]
    $scope.events = {
      click: function(polygon, eventName, model) {
        // show the window
        for(var i = 0; i < $scope.markers.length; i++) {
          if(model.path[0] && model.path[0].id == $scope.markers[i].id) {
             $scope.markers[i].show = true;
            console.log("Window Displayed")
          } else {
            $scope.markers[i].show = false;
          }
        }
      }
   };

如果可以，您应该更改数据模型

，例如定义两次id的区域。

我想出了解决这个问题的替代方法。我没有为每个标记使用一个窗口，而是只使用了一个：

<ui-gmap-window coords="selected" show="windowShown" closeClick="closeClick()">
        <!-- Window Code -->
</ui-gmap-window>

然后在控制器中我们有一个类似的点击功能：

/*
  Events when clicking on a polygon.
*/
  $scope.events = {
    click: function(polygon, eventName, model) {
      // show the window
      for(var i = 0; i < $scope.markers.length; i++) {
        if(model.path[0].id == $scope.markers[i].id) {
          $scope.selected = $scope.markers[i];
          $scope.windowShow = true;
        }
      }
    }
  };

最后，我们有一个closeClick函数来确保$scope.windowDisplay在窗口关闭后设置为false。否则，关闭同一面上的窗口后，无法重新打开该窗口。

$scope.closeClick = function() { $scope.windowShow = false; }
相关文章：