在不同瀏覽器中自定義標記不同大小 - Google Maps API（v3）

Question

我的Google Maps API（v3）集成存在問題，Safari和Chrome在其中顯示不同大小的自定義標記。

我希望能夠在不同瀏覽器中使用相同大小的圖像。

我試過調整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); 
}); 

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