我正在从事一个 AngularJs 项目，该项目包括在 Google map 上显示信息。我的例子在下面plunker .
我想通过点击标记得到的是 city 和 desc 字段。
Controller :
var cities = [{
city: 'mourouj5',
desc: 'This is the best city in the world!'
}, {
city: 'New York',
desc: 'This city is aiiiiite!'
}, {
city: 'tokyo',
desc: 'This is the second best city in the world!'
}, {
city: 'Paris',
desc: 'This city is live!'
}, {
city: 'barcelone',
desc: 'Sin City...\'nuff said!',
}];
angular.module('mapsApp', [])
.controller('MapCtrl', function($scope) {
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: new google.maps.LatLng(40.0000, -98.0000),
zoom: 2
});
var createMarker = function(info) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': info.city
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: info.city
});}
marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
});
}
for (i = 0; i < cities.length; i++) {
createMarker(cities[i]);
}
});
最佳答案
这是一个工作示例:
var cities = [{
city: 'mourouj',
desc: 'This is the best city in the world!'
}, {
city: 'New York',
desc: 'This city is aiiiiite!'
}, {
city: 'tokyo',
desc: 'This is the second best city in the world!'
}, {
city: 'Paris',
desc: 'This city is live!'
}, {
city: 'barcelone',
desc: 'Sin City...\'nuff said!',
}];
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {
$scope.markers = [];
$scope.map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: new google.maps.LatLng(40.0000, -98.0000),
zoom: 2
});
$scope.infoWindow = new google.maps.InfoWindow({});
$scope.createMarker = function (info) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': info.city
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: $scope.map,
title: info.city,
content: '<div class="infoWindowContent">' + info.desc + '</div>'
});
google.maps.event.addListener(marker, 'click', function () {
$scope.infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
$scope.infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
});
}
for (i = 0; i < cities.length; i++) {
$scope.createMarker(cities[i]);
}
});<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<body ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map" style="width: 700px; height: 700px;"></div>
</body>
关于javascript - 在 Google Maps API 的标记上显示位置信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32231187/