0
您可以在下面的示例中看到,地圖「信息窗口」在每個瀏覽器中呈現不同的內容(有時內容被切斷,有時信息窗口有滾動條)。如何使Google地圖信息窗口在所有瀏覽器中完美適合內容?
任何人都知道如何讓我的Google地圖「信息窗口」在所有瀏覽器中完美地適合內容?
HTML示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script>
function map_initialize() {
\t var myMapInfo = [
\t \t {
\t \t \t id: "122",
\t \t \t name: "Test1 Caravan Park",
\t \t \t latlng: new google.maps.LatLng(-38.43746, 144.87258)
\t \t },
\t \t {
\t \t \t id: "121",
\t \t \t name: "Test2 Family Holidays",
\t \t \t latlng: new google.maps.LatLng(-38.38098, 144.91090)
\t \t },
\t \t {
\t \t \t id: "123",
\t \t \t name: "Test3 Frankston Holiday Park",
\t \t \t latlng: new google.maps.LatLng(-38.17425, 145.14136)
\t \t },
\t \t {
\t \t \t id: "125",
\t \t \t name: "Test4 Holiday Park",
\t \t \t latlng: new google.maps.LatLng(-38.33165, 144.98331)
\t \t },
\t \t {
\t \t \t id: "124",
\t \t \t name: "Test5 Port Harbour Caravan Park",
\t \t \t latlng: new google.maps.LatLng(-38.24634, 145.24469)
\t \t },
\t ];
\t var map = new google.maps.Map(document.getElementById("map-canvas"), {
\t \t center: new google.maps.LatLng(0, 0),
\t \t zoom: 6,
\t \t mapTypeId: google.maps.MapTypeId.ROADMAP,
\t \t mapTypeControl: false,
\t \t mapTypeControlOptions: {
\t \t style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
\t \t position: google.maps.ControlPosition.BOTTOM_LEFT
\t \t },
\t \t panControl: false,
\t \t panControlOptions: {
\t \t \t position: google.maps.ControlPosition.BOTTOM_LEFT
\t \t },
\t \t zoomControl: false,
\t \t zoomControlOptions: {
\t \t style: google.maps.ZoomControlStyle.SMALL,
\t \t position: google.maps.ControlPosition.BOTTOM_LEFT
\t \t }
\t });
\t
\t // Display multiple markers on a map
\t var infoWindow = new google.maps.InfoWindow(), marker, i;
\t for (var i = 0; i < myMapInfo.length; i++) {
\t \t var marker = new google.maps.Marker({
\t \t \t position: myMapInfo[i].latlng,
\t \t \t map: map,
\t \t \t title: myMapInfo[i].name
\t \t });
\t \t
\t \t // Allow each marker to have an info window
\t \t google.maps.event.addListener(marker, 'click', (function(marker, i) {
\t \t return function() {
\t \t \t infoWindow.setContent('<div class=\"myInfoHead\"><a href=\"/caravan-parks/type/View/id/' + myMapInfo[i].id + '\">' + myMapInfo[i].name + '</a></div>');
\t \t \t infoWindow.open(map, marker);
\t \t }
\t \t })(marker, i));
\t \t
\t }
\t var latlngbounds = new google.maps.LatLngBounds();
\t for (var i = 0; i < myMapInfo.length; i++) {
\t \t latlngbounds.extend(myMapInfo[i].latlng);
\t }
latlngbounds.extend(new google.maps.LatLng(-38.032345,145.343456)); //add Berwick Vic to the latlngbounds for top padding
\t map.fitBounds(latlngbounds);
////draw a rectangle of the latlngbounds - handy for debuging
\t //new google.maps.Rectangle({
\t // bounds: latlngbounds,
\t // map: map,
\t // fillColor: "#000000",
\t // fillOpacity: 0.2,
\t // strokeWeight: 0
\t //});
}
google.maps.event.addDomListener(window, 'load', map_initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:100%; height:500px;"></div>
</body>
</html>
的 「不正確的URL」 是實驗版本。如果有問題,並且沒有確定,最終該版本將成爲發佈版本,並且您的「修復」將停止工作。 – geocodezip 2014-10-29 20:55:47
我知道這是實驗性的版本,這就是爲什麼它不應該用於現場或谷歌API文檔,因爲大多數人只是複製和粘貼他們.. – MWD 2014-10-30 01:10:19