javascript - 使用输入范围缩放谷歌地图

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>