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

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

这是一个工作示例：

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>
   

Answer 2

一个简单的解决方案，只需要更改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);
                        });

                });
            }