Question

我的Google Maps API（v3）集成存在问题，Safari和Chrome会以不同的尺寸显示自定义标记。

我希望能够在浏览器中使图像具有相同的大小。

我尝试过调整scaledSize，什么都不做。我也试过添加尺寸：新的google.maps.Size（10,10），但这似乎也无济于事。也许我输错了。

Safari中： Safari displays the image at the desired size.

Google Chrome： For some reason Chrome displays the image as a large size.

HTML

 <section id="map" class="map cont-100">

  </section>

萨斯

.map
  height: 50rem
  width: 100%

JS

var map;

function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(25.074495, -77.325485),
zoomControl: false,
scrollwheel: false,
streetViewControl: false,
mapTypeControl: false,
mapTypeId: 'roadmap',
styles: [{
  "featureType": "water",
  "stylers": [{
    "visibility": "on"
  }, {
    "color": "#b5cbe4"
  }]
}, {
  "featureType": "landscape",
  "stylers": [{
    "color": "#efefef"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "geometry",
  "stylers": [{
    "color": "#83a5b0"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "geometry",
  "stylers": [{
    "color": "#bdcdd3"
  }]
}, {
  "featureType": "road.local",
  "elementType": "geometry",
  "stylers": [{
    "color": "#ffffff"
  }]
}, {
  "featureType": "poi.park",
  "elementType": "geometry",
  "stylers": [{
    "color": "#e3eed3"
  }]
}, {
  "featureType": "administrative",
  "stylers": [{
    "visibility": "on"
  }, {
    "lightness": 33
  }]
}, {
  "featureType": "road"
}, {
  "featureType": "poi.park",
  "elementType": "labels",
  "stylers": [{
    "visibility": "on"
  }, {
    "lightness": 20
  }]
}, {}, {
  "featureType": "road",
  "stylers": [{
    "lightness": 20
  }]
}]
});

var iconBase = 'http://cochinamogulos.com/img/';
var icons = {
info: {
  icon: iconBase + 'nexia-favicon.svg'
},
scaledSize: new google.maps.Size(2, 2), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};

var features = [{
position: new google.maps.LatLng(25.074495, -77.325485),
type: 'info'
}];
google.maps.event.addDomListener(window, 'resize', function() {
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center);
});
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
  position: feature.position,
  icon: icons[feature.type].icon,
  map: map
});
});
}

任何帮助都将不胜感激。

编辑：

    var logo = {
  url: "http://cochinamogulos.com/img/nexia-favicon.svg",
  size: new google.maps.Size(20,32),
  origin: new google.maps.Size(0,0),
  anchor: new google.maps.Size(0,0),
};

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(25.074495, -77.325485),
    icon: logo,
    map: map
  });

google.maps.event.addDomListener(window, 'resize', function() {
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center);
});

Answer 1

如果你只是想调整标记的大小，这里有一个例子：

 var image = 
 {
     url: 'images/beachflag.png',
     size: new google.maps.Size(20, 32),
     origin: new google.maps.Point(0,0),
     anchor: new google.maps.Point(0, 32)
  };

var marker = new google.maps.Marker(
            {
                position: new google.maps.LatLng(data.LastLat, data.LastLon),
                data: data,
                title: data.Description,
                icon: image
            });

不同浏览器中自定义标记的大小不同 - Google Maps API（v3）

1 个答案: