视网膜上的Google地图图块显示不正确

Question

我使用Google Maps API的V3来显示带有几个标记的地图。在非视网膜设备上一切正常，但在视网膜设备上，瓷砖会扭曲，使得标记显示在错误的位置。

非视网膜截图（正确） http://www.w3schools.com/php/php_arrays.asp

Retina的截图（不正确）

以下是代码：

    jQuery(function($) {
      // Asynchronously Load the map API
      var script = document.createElement('script');
      script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize_map&key=<?php echo GOOGLE_MAPS_API_KEY; ?>";
      document.body.appendChild(script);
    });

    function initialize_map() {
      var map;
      var bounds = new google.maps.LatLngBounds();
      var mapOptions = {
        mapTypeId: 'roadmap'
      };

      // Display a map on the page
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

      var markers = [['Dublin Ohio', 40.09316, -83.13382000000001], ['Boston, Massachusetts 02135', 42.340233, -71.15995900000001]];
      var infoWindowContent = [['<div class="info_content"><h5>Dublin</h5><p>Description here</p></div>'], ['<div class="info_content"><h5>Boston</h5><p>Description here</p></div>']];

      // Display multiple markers on a map
      var infoWindow = new google.maps.InfoWindow(),
          marker, i;

      // Loop through our array of markers & place each one on the map
      for (i = 0; i < markers.length; i++) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
          position: position,
          map: map,
          title: markers[i][0]
        });

        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
          }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
      }
    }

Answer 1

答案是明确使用Google地图版本3.0而不是3.exp。