Question

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

这是我的输入类型范围

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

所有代码都包含谷歌地图API

https://jsfiddle.net/rpsycm3j/

Answer 1

＆＃13;

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);

＆＃13;

<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>

＆＃13;

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);
  });
}

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

2 个答案: