Javascript 通过单击下拉列表中的任意值应用放大缩小功能

当前屏幕在这里。我正在地图上显示一些位置。位置基本上是标记，你可以在这张图片中看到标记。我想做的是

当我改变dropdownlist值时，我想放大图表，在点击另一个dropdownlist值后，我可以很容易地看到其中一个标记位置，就像我点击PG&E时，谷歌地图会放大到特定的标记。我将与您共享我的代码。最重要的是，我使用kml文件在屏幕上加载地图。

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：1，
mapTypeId:google.maps.mapTypeId.HYBRID
//中心：{lat:41.876，lng:-87.624}
});
var ctaLayer=new google.maps.KmlLayer（{url:'https://sites.google.com/site/kmzmap1/plm/868l_little%20falls-st%20stephens%202%20.kmz？attredirects=0&d=1'，
地图：地图
});
}

我的html代码是

<div id="map" style="width:100%;height:478px;"></div>

---

您需要使用JQuery来实现这一点。我将举一个例子

定义一个选择框：

<select>
 <option >Choose...</option>
  <option value="in">zoom in</option>
  <option value="out">zoom out</option>
</select>

• options selected

  获取此选择框的值（如果有多个选择框，则最好基于ID而不是常规选择）

• valueSelected

  是此选定项的值（在我的示例中为输入或输出）
• 然后我们叫什么做；如果

  in

  我们增加放大，如果

  out

  我们缩小并平移到一个坐标（这可能是一个标记）

---

jsFIDLE:

可能重复我没有理解你的观点@gus27你能给我一个现场演示吗？

<div id="map" style="width:100%;height:478px;"></div>

<select>
 <option >Choose...</option>
  <option value="in">zoom in</option>
  <option value="out">zoom out</option>
</select>

$('select').on('change', function() {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    if(valueSelected == 'in'){
      map.setZoom(17);
    } 
    if(valueSelected == 'out'){
    map.setZoom(4);
    map.panTo(new google.maps.LatLng(33.818038, -117.928492));
    }
})