带有动态标记的谷歌地图圆形平铺问题

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