標記信息窗口無法使用ngMap正常工作

Question

我正在嘗試使用ng-map在Google地圖上顯示信息窗口。 這是我的代碼：

<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

根據@artgb答案，您需要將on-click="showDetails(e, pothole)更改為on-click="showDetails(event, pothole) 。 請參閱event參數。 那是真正的問題。

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

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

1. 您需要以下腳本：

   1. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGsmJhDsK9HS2_kYtQXbiJqaAE2AT_Pw0"></script> 。 AIzaSyCGsmJhDsK9HS2_kYtQXbiJqaAE2AT_Pw0是此演示的我的API密鑰。 您可以在以下網址獲得自己的網址 ： 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>

2. 您需要使用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
}]

---

3. 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> 

Answer 2

問題出在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>