自定義Google地圖API V3縮放按鈕

-5

這是不可能的。您可以使用一組預定義的選項參數稍微調整其外觀，或者您可以實現提供與縮放控件相同功能的自定義地圖控件。欲瞭解更多信息，請參閱this page。

更新：鏈接固定。感謝您的反饋！

來源

2011-10-27 13:41:14

+0

鏈接不工作？ – HAWKES08

+0

請修復您的鏈接或將相關說明發布到您的答案。 – Sparky

+0

[此處修復鏈接]（http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/controls.html）。他在「htm」結尾錯過了「L」。 – RASG

13

經過幾小時的搜索，我找到了解決方案只要確保您替換您的API ID！享受！

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; } 
    </style> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=YOUR-MAP_API-ID&sensor=false&region=AU"> 
    </script> 



<script type="text/javascript"> 

function HomeControl(controlDiv, map) { 

google.maps.event.addDomListener(zoomout, 'click', function() { 
    var currentZoomLevel = map.getZoom(); 
    if(currentZoomLevel != 0){ 
    map.setZoom(currentZoomLevel - 1);}  
    }); 

    google.maps.event.addDomListener(zoomin, 'click', function() { 
    var currentZoomLevel = map.getZoom(); 
    if(currentZoomLevel != 21){ 
    map.setZoom(currentZoomLevel + 1);} 
    }); 

} 

var map; 
var markersArray = []; 


function initialize() { 

    var mapDiv = document.getElementById('map-canvas'); 
    var myLatlng = new google.maps.LatLng(-33.90224, 151.20215); 
    var mapOptions = { 
    zoom: 15, 
    center: myLatlng, 
    Marker: true, 
    panControl: false, 
    zoomControl: false, 
    streetViewControl: false, 
    overviewMapControl: false, 
    mapTypeControl: false, 
    mapTypeControl: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    map = new google.maps.Map(mapDiv, mapOptions); 
    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title:"Hello World!" 
    }); 

    // Create the DIV to hold the control and 
    // call the HomeControl() constructor passing 
    // in this DIV. 
    var homeControlDiv = document.createElement('div'); 
    var homeControl = new HomeControl(homeControlDiv, map); 

} 

google.maps.event.addDomListener(window, 'load', initialize);  

</script> 

</head> 




    <body> 
    <div id="map-canvas"></div> 
    <div id="zoomout" style="border:1px solid; width:150px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div> 
    <div id="zoomin" style="border:1px solid; width:150px; cursor:pointer; ">ZOOM ME IN</div> 
    </body> 
</html>

來源

2013-06-03 04:33:40

+0

是否可以添加自定義Pegman按鈕？ – Anuket

+0

@Antonio Almeida謝謝 –

3

我這樣做是在CSS方式：

#map-container .gm-style > .gmnoprint > .gmnoprint { background: url(/images/map-zoom-controls.png) no-repeat center center !important; width: 42px !important; height: 68px !important; } 
#map-container .gm-style > .gmnoprint > .gmnoprint > div > img { display: none !important; } 
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom in"] { top: 2px !important; left: 2px !important; width: 38px !important; height: 31px !important; } 
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom out"] { top: 35px !important; left: 2px !important; width: 38px !important; height: 30px !important; }

這是具有圖像：寬度：42PX; height：68px;

做出自己的調整。

注意

這僅適用於您正在使用的英語版本，因爲標題屬性。

來源

2014-02-11 18:54:17 PAdrian

+0

非常好！對我來說工作非常好！ – SquareCat

+2

只要Google地圖用戶界面提供的結構保持不變，您就不會依賴硬編碼規則來實現您的目標。 – torresomar

18

我在晚會很晚，但這裏是我的兩美分。

您有兩種基本選擇：

選項1：你要麼使用HTML/CSS自己，然後你就可以使用位置絕對或類似手段放置在地圖上，在正確的位置創建控件。儘管這在製作中有效，但我不喜歡這樣做，因爲元素的HTML/CSS不會在顯示地圖的同時加載。此外，您正在爲控件分隔您的HTML/CSS代碼，以便在不同的頁面重複使用相同的地圖更加困難。例如「我忘了添加控件了嗎？」

選項2：創建a custom control它的外觀和感覺你喜歡的變焦控制器。下面是一個關於這個在實踐中的代碼。

總之，你需要通過調用先禁用正常UI控制器：

var mapOptions = { 
    zoom: 12, 
    center: chicago, 
    /* Disabling default UI widgets */ 
    disableDefaultUI: true // <-- see this line 
}

然後你只需要創建一個控制器，並使用它。

HTML：

... 
<div id="map-canvas"></div> 
...

CSS：

html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
}

的JavaScript：

var map; 
var chicago = new google.maps.LatLng(41.850033, -87.6500523); 

/** 
* The ZoomControl adds +/- button for the map 
* 
*/ 
function ZoomControl(controlDiv, map) { 

    // Creating divs & styles for custom zoom control 
    controlDiv.style.padding = '5px'; 

    // Set CSS for the control wrapper 
    var controlWrapper = document.createElement('div'); 
    controlWrapper.style.backgroundColor = 'white'; 
    controlWrapper.style.borderStyle = 'solid'; 
    controlWrapper.style.borderColor = 'gray'; 
    controlWrapper.style.borderWidth = '1px'; 
    controlWrapper.style.cursor = 'pointer'; 
    controlWrapper.style.textAlign = 'center'; 
    controlWrapper.style.width = '32px'; 
    controlWrapper.style.height = '64px'; 
    controlDiv.appendChild(controlWrapper); 

    // Set CSS for the zoomIn 
    var zoomInButton = document.createElement('div'); 
    zoomInButton.style.width = '32px'; 
    zoomInButton.style.height = '32px'; 
    /* Change this to be the .png image you want to use */ 
    zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")'; 
    controlWrapper.appendChild(zoomInButton); 

    // Set CSS for the zoomOut 
    var zoomOutButton = document.createElement('div'); 
    zoomOutButton.style.width = '32px'; 
    zoomOutButton.style.height = '32px'; 
    /* Change this to be the .png image you want to use */ 
    zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")'; 
    controlWrapper.appendChild(zoomOutButton); 

    // Setup the click event listener - zoomIn 
    google.maps.event.addDomListener(zoomInButton, 'click', function() { 
    map.setZoom(map.getZoom() + 1); 
    }); 

    // Setup the click event listener - zoomOut 
    google.maps.event.addDomListener(zoomOutButton, 'click', function() { 
    map.setZoom(map.getZoom() - 1); 
    }); 

} 

function initialize() { 
    var mapDiv = document.getElementById('map-canvas'); 

    var mapOptions = { 
    zoom: 12, 
    center: chicago, 
    /* Disabling default UI widgets */ 
    disableDefaultUI: true 
    } 

    map = new google.maps.Map(mapDiv, mapOptions); 

    // Create the DIV to hold the control and call the ZoomControl() constructor 
    // passing in this DIV. 
    var zoomControlDiv = document.createElement('div'); 
    var zoomControl = new ZoomControl(zoomControlDiv, map); 

    zoomControlDiv.index = 1; 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv); 
} 

initialize();

注：此代碼不含任何FANC y圖標等，只是佔位符。因此，您可能需要調整以適應您的需求。此外，請記住添加HTML5標準標籤和腳本包括谷歌地圖api v3的JavaScript。我只添加了<div id="map-canvas"></div>，因爲對身體其他部分的需求非常明顯。

要查看直播：Here is working jsfiddle example

乾杯。

來源

2014-08-08 09:44:30

+2

太棒了。 –

+1

非常感謝你。 –

+0

這很好，謝謝！一個小的改進可能是給出縮放控件的類名，如'controlWrapper.setAttribute（「class」，「custom-zoom-wrapper」）;'等等。這意味着樣式可以添加到css而不是js中，從而導致更簡潔的代碼並允許媒體查詢，即更小屏幕上的更小按鈕。 – Davey

自定義Google地圖API V3縮放按鈕

回答

相關問題