带有动态标记的Google地图循环平铺问题

Question

Map with Markers

我通过以下脚本获取此地图：

<script>
       function Initialize() {

           google.maps.visualRefresh = true;
           var infowindow;
           $.ajax({
               type: "GET",
               url: "/api/Truck",
               dataType: 'json',
               contentType: 'application/x-www-form-urlencoded',
               success: function (data) {
                   var Center = new google.maps.LatLng(data[0].CurrentLatitude, data[0].CurrentLongitude);

                   var mapOptions = {
                       zoom: 8,
                       center: Center,
                       mapTypeId: google.maps.MapTypeId.ROADMAP
                   };

                   var gmap = new google.maps.Map(document.getElementById("myMap2"), mapOptions);
                   $.each(data, function (i, item) {
                       var marker = new google.maps.Marker({
                           'position': new google.maps.LatLng(item.CurrentLatitude, item.CurrentLongitude),
                           'map': gmap,
                           'title': item.TruckNumber
                       });
                       marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
                       google.maps.event.addListener(marker, 'click', function () {

                           if (infowindow) infowindow.close();
                           infowindow = new google.maps.InfoWindow({ content: "<div class='infoDiv'><h3>" + item.TruckNumber + "</h3></div>" });

                           infowindow.open(gmap, marker);
                       });
                   });   

               }

           })
       }
</script>

CSS：

myMap2 { 
  width: 1041px; 
  height: 370px; 
  position: relative; 
  overflow: hidden; 
}

我只是想知道为什么我在地图上得到这些圆形瓷砖？我尝试使用不同的缩放值，但仍然会显示这些圆圈

Answer 1

你的页面上有一个CSS规则，它由地图<div>继承，它相当于以下内容：

img {
  border-radius: 50%;
}

proof of concept fiddle