自定义标记不同大小在不同的浏览器中 - 谷歌地图 API (v3)

Question

我的Google Maps API(v3(集成中遇到了问题，其中Safari和Chrome以不同的大小显示自定义标记。

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

我试过调整缩放大小，什么也没做。我也尝试添加大小：新的google.maps.Size(10,10(，但这似乎也没有帮助。也许我输入错了。

野生动物园： Safari 浏览器以所需大小显示图像。

谷歌浏览器： 出于某种原因，Chrome 会将图片显示为大尺寸。

.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
});