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

Question

当前屏幕在这里。我在 map.locations 中显示的一些位置基本上是标记，你可以在这个 picture.what 中看到标记我想做的是,

当我更改下拉列表值时，我想放大图表，在单击另一个下拉列表值后，我可以轻松地看到其中一个标记位置，就像当我单击 PG & E 时，google 地图将放大特定标记。我将与您分享我的代码。最重要的是，我正在使用 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框：

<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 框并执行某种操作：

$('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 获取这个 select 框的值（有多个你可能最好基于 ID 而不是通用 select）。
valueSelected 是这个 selected 项的值（在我的示例中为 in 或 out）。
我们再调用做什么；如果 in 我们增加放大，如果 out 我们缩小并平移到一个坐标（这可能是一个标记）。

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

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

Apply Zoom In Zoom out feature by clicking dropdown list any value

javascript

google-maps

google-maps-api-3

kml

kmz