我的Google Maps API(v3)集成存在问题,Safari和Chrome在其中显示不同大小的自定义标记。在不同浏览器中自定义标记不同大小 - Google Maps API(v3)
我希望能够在不同浏览器中使用相同大小的图像。
我试过调整scaledSize,什么都不做。我也尝试添加大小:新的google.maps.Size(10,10),但这似乎也没有帮助。也许我错了。
Safari浏览器: Safari displays the image at the desired size.
谷歌浏览器: 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);
});
我得到张贴代码JavaScript错误:'InvalidValueError:的setIcon:在财产来源:不是一个点:在财产x:不是一个数字' – geocodezip
感谢您的更正,指出它修复了错误,图像现在正确大小。令人惊讶的是,只有一个词可以在代码中完成。 –