使用输入范围缩放谷歌地图答案

【问题标题】：Zoom google maps using Input range使用输入范围缩放谷歌地图
【发布时间】：2016-09-27 21:40:20
【问题描述】：

您好如何使用输入类型范围放大或缩小谷歌地图？

这是我的输入类型范围

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

所有的代码都有google map API

https://jsfiddle.net/rpsycm3j/

【问题讨论】：

Max 设置为 500... 似乎您没有查看 Google 地图的最大缩放值和其他属性。这是一个好的开始：developers.google.com/maps/documentation/javascript/reference

标签： javascript jquery google-maps google-api

【解决方案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>

【讨论】：

谢谢，我只是像这样添加开关： switch (miles) { case 500: map.setZoom(5);休息;案例 400：map.setZoom(7)；休息;案例500：中断；案例500：中断；案例500：中断；案例500：中断；案例500：中断； }

【解决方案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);
  });
}

【讨论】：