使用輸入範圍縮放谷歌地圖

Question

嗨如何使用輸入類型範圍放大或縮小谷歌地圖？

這裏是我的輸入類型範圍

<input class="form-control" id="range" type="range" min="10" max="500" value="50" step="10"> 

有所有的代碼與谷歌地圖API

https://jsfiddle.net/rpsycm3j/

Answer 1

var map; // Make accessible 
 

 
function map__Init(){ 
 
    map = new google.maps.Map(document.getElementById("map"), { 
 
    center: new google.maps.LatLng(51.5, -0.2), 
 
    zoom: 5, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
} 
 

 
function map__SetZoom() { 
 
    map.setZoom(+this.value); 
 
} 
 

 
google.maps.event.addDomListener(window, "load", map__Init); 
 
document.querySelector("#zoom").addEventListener("input", map__SetZoom);

<script src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script> 
 
<input id="zoom" type="range" min="0" max="20" value="5" step="1"> 
 
<div id="map" style="height: 400px;"></div>

Answer 2

首先，你需要有範圍輸入元素，例如一個理智確定指標：

<input class="form-control" id="range" type="range" min="5" max="15" value="10" step="1"> 

然後你可以這樣做：

function myMap() { 
    var mapCanvas = document.getElementById("map"); 
    var mapOptions = { 
    center: new google.maps.LatLng(51.5, -0.2), 
    zoom: 10 
    } 
    var map = new google.maps.Map(mapCanvas, mapOptions); 

    var range = document.getElementById("range"); 
    range.addEventListener("change", function() { 
    map.setZoom(range.value); 
    }); 
}