白色框出现在谷歌地图的标记点中

时间:2017-05-16 10:05:13

标签: angularjs google-maps

我是AngularJS的新手,我在我的项目中使用Google地图API。当我加载项目时,只有谷歌地图中的标记位置有一些白色框。 这是我的代码:

map.html

  <div id="map"></div>

mapController.html

var cities = [
    {
        city : 'Toronto',
        desc : 'This is the best city in the world!',
        lat : 43.7000,
        long : -79.4000
    },
    {
        city : 'New York',
        desc : 'This city is aiiiiite!',
        lat : 40.6700,
        long : -73.9400
    },
    {
        city : 'Chicago',
        desc : 'This is the second best city in the world!',
        lat : 41.8819,
        long : -87.6278
    },
    {
        city : 'Los Angeles',
        desc : 'This city is live!',
        lat : 34.0500,
        long : -118.2500
    },
    {
        city : 'Las Vegas',
        desc : 'Sin City...\'nuff said!',
        lat : 36.0800,
        long : -115.1522
    }
];


(function() {
    'use strict';
    AppModule.controller("MapCtrl",["$scope",MapCtrl]);

    function MapCtrl($scope) {

        var mapOptions = {
                zoom: 2,
                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
                });
                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 (var i = 0; i < cities.length; i++){
                createMarker(cities[i]);
            }

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

    }
}())

map.css

    #map {
     height:420px;
   }

here is the image of white boxes in the marker side of google map

任何人都经历过这个并找到解决方案,请分享。

0 个答案:

没有答案