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

Question

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

当我更改下拉列表值时，我想放大图表，在点击另一个下拉列表值后，我可以轻松地看到其中一个标记位置，就像我点击PG＆amp; E谷歌地图将放大特定标记。我将与您分享我的代码。最重要的是我使用kml文件在屏幕上加载地图。

<script>
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.HYBRID
        //   center: {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',
        map: map
    });
}

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

我的HTML代码是.....

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

Answer 1

您需要使用JQuery来实现此目的。我将通过一个例子。

定义一个选择框：

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

然后我们需要确保全局定义地图，以便我们可以访问页面<script>方面的任意内容

var map;

然后将地图分配给该变量map = new google...

然后我们使用jquery来收听选择框并执行某种操作：

$('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));
    }
})

• optionSelected获取此选择框的值（您可能最好使用多个ID，而不是通用选择）。
• valueSelected是此选定项目的值（在我的示例中输入或输出）。
• 然后我们打算做什么;如果in我们增加放大，如果out我们缩小并平移到坐标（这可能是标记）。

JSFiddle：http://jsfiddle.net/4mtyu/2741/