如何自定义谷歌地图标记弹出窗口？

Question

我有一个经纬度城市列表。在地图中，我显示了 5 个带有详细信息的标记。当我单击标记时，它会在信息窗口中显示该特定城市的详细信息，并且一切正常。

是否可以编辑信息窗口？

预期： 当我单击标记时，应在页面底部显示该标记详细信息和左、右箭头。

1.div 应该包含 芝加哥 get(传递id值的按钮) 这是世界上第二好的城市！ 芝加哥'

2.如果我单击左箭头，它应该移动到左侧标记（基于该标记数据应该在该 div 中更改）

3.如果我单击右箭头，它应该移动到右侧标记（基于该标记数据应该在该 div 中更改）

 angular.module('mapsApp', [])
        .controller('MapCtrl', ['$scope', '$http', '$location', '$window', '$compile', function($scope, $http, $location, $window, $compile) {
            var cities = [{
                id: '1',
                city: 'Toronto',
                desc: 'This is the best city in the world!',
                lat: 43.7000,
                long: -79.4000,
				icon:'http://labs.google.com/ridefinder/images/mm_20_purple.png'
            }, {
                id: '2',
                city: 'New York',
                desc: 'This city is aiiiiite!',
                lat: 40.6700,
                long: -73.9400,
				icon:'http://labs.google.com/ridefinder/images/mm_20_red.png'
            }, {
                id: '3',
                city: 'Chicago',
                desc: 'This is the second best city in the world!',
                lat: 41.8819,
                long: -87.6278,
				icon:'http://labs.google.com/ridefinder/images/mm_20_green.png'
            }, {
                id: '4',
                city: 'Los Angeles',
                desc: 'This city is live!',
                lat: 34.0500,
                long: -118.2500,
				icon:'http://labs.google.com/ridefinder/images/mm_20_blue.png'
            }, {
                id: '5',
                city: 'Las Vegas',
                desc: 'This city is live!',
                lat: 36.0800,
                long: -115.1522,
				icon:'http://labs.google.com/ridefinder/images/mm_20_yellow.png'
            }];

            var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(40.0000, -98.0000),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            }

            $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

            $scope.markers = [];

            var infoWindow = new google.maps.InfoWindow();

            var createMarker = function(info) {

                var marker = new google.maps.Marker({
                    map: $scope.map,
                    position: new google.maps.LatLng(info.lat, info.long),
                    title: info.city,
					icon: info.icon
                });
                marker.content = '<div><h2>'+marker.title+'</h2><input type="button" value="get" ng-click="get(' + info.id + ')"/>' + '<div class="infoWindowContent">' + info.desc + '</div><div class="infoWindowContent">' + info.city + '</div></div>';

                google.maps.event.addListener(
                    marker,
                    'click', (function(marker, $scope) {
                        return function() {
                            var compiled = $compile(marker.content)($scope);
                            $scope.$apply();
                            infoWindow.setContent(compiled[0]);
                            infoWindow.open($scope.map, marker);
                        };
                    })(marker, $scope)
                );

                $scope.markers.push(marker);
            }
            $scope.get = function(id) {
                console.log(id);
                //alert("from $scope.get id : "+id); 
            }
            for (i = 0; i < cities.length; i++) {
                createMarker(cities[i]);
            }

            $scope.openInfoWindow = function(e, selectedMarker) {
                e.preventDefault();
                google.maps.event.trigger(selectedMarker, 'click');
            }




            $scope.clearMarkers = function() {
                for (var i = 0; i < $scope.markers.length; i++) {
                    $scope.markers[i].setMap(null);
                }
                $scope.markers.length = 0;
            }



            $scope.filterMarkers = function() {
                //1.select filtered cities
                var filteredCities;
                var cityDesc = $scope.data.singleSelect;
                if (cityDesc == '0') {
                    filteredCities = cities;
                } else {
                    filteredCities = cities.filter(function(c) {
                        if (c.desc == cityDesc)
                            return c;
                    });
                }
                //2.update markers on map
                $scope.clearMarkers();
                for (i = 0; i < filteredCities.length; i++) {
                    createMarker(filteredCities[i]);
                }
            }

        }]);

#map {
        height: 420px;
        width: 600px;
    }
    
    .infoWindowContent {
        font-size: 14px !important;
        border-top: 1px solid #ccc;
        padding-top: 10px;
    }
    
    h2 {
        margin-bottom: 0;
        margin-top: 0;
    }

<script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="mapsApp" ng-controller="MapCtrl">
        <div id="map"></div>
        <br>
        <br>
        <label>Filter Marker </label>
        <br>
        <select name="singleSelect" ng-model="data.singleSelect" ng-change="filterMarkers()">
            <option value="0">all</option>
            <option value="This is the best city in the world!">This is the best city in the world!</option>
            <option value="This city is aiiiiite">This city is aiiiiite</option>
            <option value="This is the second best city in the world!">This is the second best city in the world!</option>
            <option value="This city is live!">This city is live!</option>
        </select>
        <br>
        <div id="class" ng-repeat="marker in markers | orderBy : 'title'">
            <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
        </div>
    </div>

Answer 1

您可以直接在标记变量中添加一个 html 项：

var marker = new google.maps.Marker({
                    map: $scope.map,
                    position: new google.maps.LatLng(info.lat, info.long),
                    title: info.city,
                    icon: info.icon
                    html: <your html code here>
                });

Answer 2

你的意思是：

<html>
<head>
<style>
#map {
        height: 420px;
        width: 600px;
    }
    
    .infoWindowContent {
        font-size: 14px !important;
        border-top: 1px solid #ccc;
        padding-top: 10px;
    }
    
    h2 {
        margin-bottom: 0;
        margin-top: 0;
    }
    .bar {
  width:200px;
  display:inline-block;
  overflow: auto;
  white-space: nowrap;
  margin:0px auto;
  border:1px red solid;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"> </script>
<script>
 angular.module('mapsApp', [])
        .controller('MapCtrl', ['$scope', '$http', '$location', '$window', '$compile', function($scope, $http, $location, $window, $compile) {
            var cities = [{
                id: '1',
                city: 'Toronto',
                desc: 'This is the best city in the world!',
                lat: 43.7000,
                long: -79.4000,
				icon:'http://labs.google.com/ridefinder/images/mm_20_purple.png'
            }, {
                id: '2',
                city: 'New York',
                desc: 'This city is aiiiiite!',
                lat: 40.6700,
                long: -73.9400,
				icon:'http://labs.google.com/ridefinder/images/mm_20_red.png'
            }, {
                id: '3',
                city: 'Chicago',
                desc: 'This is the second best city in the world!',
                lat: 41.8819,
                long: -87.6278,
				icon:'http://labs.google.com/ridefinder/images/mm_20_green.png'
            }, {
                id: '4',
                city: 'Los Angeles',
                desc: 'This city is live!',
                lat: 34.0500,
                long: -118.2500,
				icon:'http://labs.google.com/ridefinder/images/mm_20_blue.png'
            }, {
                id: '5',
                city: 'Las Vegas',
                desc: 'This city is live!',
                lat: 36.0800,
                long: -115.1522,
				icon:'http://labs.google.com/ridefinder/images/mm_20_yellow.png'
            }];

            var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(40.0000, -98.0000),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            }

            $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

            $scope.markers = [];

            var infoWindow = new google.maps.InfoWindow();


            var createMarker = function(info,i) {

                var marker = new google.maps.Marker({
                    map: $scope.map,
                    position: new google.maps.LatLng(info.lat, info.long),
                    title: info.city,
					icon: info.icon
                });
                marker.content = "<div><h2>"+marker.title+"</h2><input type='button' value='get' ng-click='get(" + info.id + ")'/>" + "<div class='infoWindowContent'>" + info.desc + "</div><div class='infoWindowContent'>" + info.city + "</div><div class='bar'><div style='float: left;'><button ng-click='markerClick("+(i-1)+")'><< LEFT</button></div><div style='float: right;'><button ng-click='markerClick("+(i+1)+")'>RIGHT >></button></div></div></div>";

                google.maps.event.addListener(
                    marker,
                    'click', (function(marker, $scope) {
                        return function() {
                            var compiled = $compile(marker.content)($scope);
                            // $scope.$apply();
                            infoWindow.setContent(compiled[0]);
                            infoWindow.open($scope.map, marker);
                        };
                    })(marker, $scope)
                );

                $scope.markers.push(marker);
            }
            $scope.markerClick=function(i){
            	if(i===-1)
            		i=4;
            	if(i===5)
            		i=0
            	console.log("in marker click"+i);

            	google.maps.event.trigger( $scope.markers[i], 'click' );
            }
            $scope.get = function(id) {
                console.log(id);
                //alert("from $scope.get id : "+id); 
            }

            for (i = 0; i < cities.length; i++) {
                createMarker(cities[i],i);
            }

            $scope.openInfoWindow = function(e, selectedMarker) {
                e.preventDefault();
                google.maps.event.trigger(selectedMarker, 'click');
            }




            $scope.clearMarkers = function() {
                for (var i = 0; i < $scope.markers.length; i++) {
                    $scope.markers[i].setMap(null);
                }
                $scope.markers.length = 0;
            }



            $scope.filterMarkers = function() {
                //1.select filtered cities
                var filteredCities;
                var cityDesc = $scope.data.singleSelect;
                if (cityDesc == '0') {
                    filteredCities = cities;
                } else {
                    filteredCities = cities.filter(function(c) {
                        if (c.desc == cityDesc)
                            return c;
                    });
                }
                //2.update markers on map
                $scope.clearMarkers();
                for (i = 0; i < filteredCities.length; i++) {
                    createMarker(filteredCities[i]);
                }
            }

        }]);
</script>
</head>
<body>

<div ng-app="mapsApp" ng-controller="MapCtrl">
        <div id="map"></div>
        <br>
        <br>
        <label>Filter Marker </label>
        <br>
        <select name="singleSelect" ng-model="data.singleSelect" ng-change="filterMarkers()">
            <option value="0">all</option>
            <option value="This is the best city in the world!">This is the best city in the world!</option>
            <option value="This city is aiiiiite">This city is aiiiiite</option>
            <option value="This is the second best city in the world!">This is the second best city in the world!</option>
            <option value="This city is live!">This city is live!</option>
        </select>
        <br>
        <div id="class" ng-repeat="marker in markers | orderBy : 'title'">
            <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
        </div>
    </div>

</body>
</html>

我无法在按钮样式和对齐方面为您提供帮助，但我尽量让您的期望更接近。