标记信息-window 无法使用 ngMap

Question

我正在尝试使用 ng-map 在 google 地图上显示信息 window。这是我的代码：

<div id="map">
  <ng-map zoom="13" center="[{{latitude}}, {{longitude}}]" style="display: block; height: 100%;">
    <marker ng-repeat="pothole in potholeData" position="{{pothole.lat}},{{pothole.lng}}" on-click="showDetails(e, pothole)"></marker>
  </ng-map>
</div>

我在每个带有纬度和经度值的标记上给出一个 on-click 函数。但在我的控制器中，我得到了 undefined 值。

这是我的控制器：

$scope.showDetails = function(e, pothole) {
  var infowindow = new google.maps.InfoWindow();
  var center = new google.maps.LatLng(pothole.lat, pothole.lng);

  infowindow.setContent(
    '<h3>' + pothole + '</h3>');

  infowindow.setPosition(center);
  infowindow.open($scope.map);
}

在 showDetails 函数中，我得到 pothole undefined。有人可以帮我吗？

Answer 1

问题出在 on-click="showDetails(e, pothole)，请更改为 on-click="showDetails(event, pothole)。我已经制作了片段工作。

angular.module('mapApp', ['ngMap'])
    .controller('mapController', function($scope, NgMap) {

        NgMap.getMap().then(function(map) {
            $scope.map = map;
        });
        $scope.potholeData = [
            { lat: 59.923043, lng: 10.752839 },
            { lat: 59.339025, lng: 18.065818 },
            { lat: 55.675507, lng: 12.574227 },
            { lat: 52.521248, lng: 13.399038 },
            { lat: 48.856127, lng: 2.346525 }
        ];
        $scope.showDetails = function(e, pothole) {
          console.log(pothole);
          var infowindow = new google.maps.InfoWindow();
          var center = new google.maps.LatLng(pothole.lat,pothole.lng);

          infowindow.setContent(
            '<h3>' + pothole.lat + " " + pothole.lng + '</h3>');

          infowindow.setPosition(center);
          infowindow.open($scope.map);
        };

    });

<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
    <ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
        <marker ng-repeat="pothole in potholeData"
                position="{{pothole.lat}},{{pothole.lng}}" on-click="showDetails(event, pothole)">
        </marker>
    </ng-map>
</div>

Answer 2

根据@artgb 的回答，您需要将 on-click="showDetails(e, pothole) 更改为 on-click="showDetails(event, pothole)。请参阅 event 参数。这才是真正的问题。

在此完整 ng-map 版本中，工作方式相同。

根据https://ngmap.github.io/。

您需要这些脚本：
1. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGsmJhDsK9HS2_kYtQXbiJqaAE2AT_Pw0"></script>。 AIzaSyCGsmJhDsK9HS2_kYtQXbiJqaAE2AT_Pw0 是我的 API 此演示的 KEY。你可以得到你自己的：https://developers.google.com/maps/documentation/javascript/.
2. <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
3. <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
您需要使用 id 来识别您的标记。当你使用 ngRepeat 我正在使用这个数据：

[{
  "id": "Location1",
  "text": "Some content 1...",
  "lat": -12.339223,
  "lng": -76.808624
}, {
  "id": "Location2",
  "text": "Some content 2...",
  "lat": -12.349423,
  "lng": -76.828824
}]

ng-map 指令包含原始 Google Maps V3 api 给用户，因此您不需要使用 new google.maps 对象。

像这样：

(function() {

  angular.module("app", ["ngMap"]).controller("Controller", ["$scope", "NgMap", function($scope, NgMap) {
    NgMap.getMap().then(function(map) {
      $scope.map = map;
    });

    $scope.latitude = -12.339223;
    $scope.longitude = -76.808624;
    $scope.potholeData = [{
      "id": "Location1",
      "text": "Some content 1...",
      "lat": -12.339223,
      "lng": -76.808624
    }, {
      "id": "Location2",
      "text": "Some content 2...",
      "lat": -12.349423,
      "lng": -76.828824
    }];
    $scope.pothole = {};

    $scope.showDetails = function(e, pothole) {
      $scope.pothole = pothole;
      $scope.map.showInfoWindow('foo-iw', pothole.id);
    };

    $scope.hideDetail = function() {
      $scope.map.hideInfoWindow('foo-iw');
    };
  }]);
})();

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGsmJhDsK9HS2_kYtQXbiJqaAE2AT_Pw0"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div data-ng-app="app">
  <div data-ng-controller="Controller">
    <ng-map default-style="true" center="{{latitude}}, {{longitude}}" zoom="13">
      <marker id="{{pothole.id}}" ng-repeat="pothole in potholeData" position="{{pothole.lat}},{{pothole.lng}}" on-click="showDetails(event, pothole)"></marker>

      <info-window id="foo-iw">
        <div ng-non-bindable="">
          id: {{pothole.id}}<br/> Text: {{pothole.text}}<br/> Position: {{anchor.getPosition()}}
        </div>
      </info-window>
    </ng-map>
  </div>
</div>

标记信息-window 无法使用 ngMap

Marker Info-window not working using ngMap

javascript

google-maps-markers

angularjs

angularjs-ng-repeat

ng-map