如何将 jQuery 输入值传递给 Google Maps JS API v3

How to pass jQuery input values to Google Maps JS API v3?

本文关键字：Maps Google JS API v3 jQuery 输入 值传      更新时间：2023-09-26

  • 1：我有一个用于样式的谷歌地图代码，并且有一些用户输入控件，例如文本框，组合框，它们在地图的同一页面上使用jQuery编码。现在我想传递输入用户，如featureType或MapType来初始化Javascript中的Google地图的功能。我不知道如何连接这两个部分。它们分别正常工作。我对jQuery :)很陌生。

  • 2：第二个问题是我不知道我应该在哪里找到jQuery代码，在Head或Body中，因为我的谷歌地图JS代码在Head中。

这是谷歌地图代码：

<head>
...   
<script type="text/javascript">
  function initialize() {
    // map style default
    var pinkParksStyles = [
      {
        featureType: "road", // or e.g: "road.highway" or "road.local" or "poi.medical"
        elementType: "all", // or "geometry" or "labels"
        stylers: [
          { hue: "#ff0000" },
          { saturation: -5 },
          { lightness: -34 },
          { gamma: 1.16 }
        ]
      }
    ];
    var myOptions = {
      zoom: 12,
      center: new google.maps.LatLng(55.753395,37.62394),
      mapTypeId: google.maps.MapTypeId.ROADMAP // other mapType: Hybrid, Terrain, Satellite
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    map.setOptions({styles: pinkParksStyles});
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<head>

这是jQuery输入标签，我通过警报测试了它们。

j查询输入控件

<body>  
...
<div id="map_canvas" style="width:700px; height:500px"></div>  // show the map
<form>
  <label for="saturation"> Type a Number between -100, 100: </label>
  <input id="saturation" type="text" />
  <input type="button" value="Show Value" onclick="alert( $('#saturation').val() )" />
</form>
<form>
  <select id="mapTypeId">
    <option value="1">Hybrid</option>
    <option value="2">Terrain</option>
    <option value="3">Satellite</option>
  </select>
  <input type="button" value="Show Value" onclick="alert( $('#mapTypeId').val() )" />
</form>
<form>
  <select id="featureType">
    <option value="1">all</option>
    <option value="2">road</option>
    <option value="3">water</option>
  </select>
  <input type="button" value="Show Value" onclick="alert( $('#mapTypeId').val() )" />
</form>
...
</body>

我只知道应该使用这样的东西： 

var featureType = $("#featureType").val();

但不知道如何将其发送到G地图JS代码以及jquery的位置。

提前谢谢。

像这样修改初始化函数：

function initialize() {
       var featureType = $("#featureType").val();
          // map style default
        var pinkParksStyles = [
          {
            featureType: featureType , // or e.g: "road.highway" or "road.local" or"poi.medical"
            elementType: "all", // or "geometry" or "labels"
            stylers: [
              { hue: "#ff0000" },
              { saturation: -5 },
              { lightness: -34 },
              { gamma: 1.16 }
            ]
          }
        ]; 
       ...........
    }
相关文章：