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

Display location's information on the marker of Google Maps API

本文关键字：显示位置信息 Google Maps API 更新时间：2023-09-26

我正在做一个AngularJs项目，它包括在谷歌地图上显示信息。我的例子是在下面的活塞。

我想通过点击标记得到的是字段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]);
        }

    });

下面是一个工作示例:

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>

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