Question

我正在开发一个AngularJs项目，该项目包括在Google地图上显示信息。我的例子是以下plunker。

点击标记我想得到的是字段city和desc。

控制器：

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


    });

Answer 1

一个简单的解决方案，只需要更改createMarker函数：

var createMarker = function(info) {
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    'address': info.city
                },
                function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {

                        var marker1 = new google.maps.Marker({
                            position: results[0].geometry.location,
                            map: map,
                            title: info.city
                        });}

                        var infowindow1 = new google.maps.InfoWindow({
                          content:info.desc
                        });
                        google.maps.event.addListener(marker1,'click',function() {
                           infowindow1.open(map,marker1);
                        });

                });
            }

显示Google Maps API标记的位置信息

1 个答案: