0

  • 1: スタイル設定用の Google マップ コードがあり、マップの同じページで jQuery コーディングを使用しているテキスト ボックス、コンボ ボックスなどのユーザー入力コントロールがあります。ここで、 featureTypeやMapTypeなどの入力ユーザーを渡して、Javascript にもある Google マップの関数を初期化したいと考えています。この 2 つの部分を接続する方法がわかりません。それらは別々に正しく機能します。私はjQueryの初心者です:)。

  • 2: 2 番目の問題は、Google マップの JS コードが Head にあるため、jQuery コードを Head または Body のどこに配置すればよいかわからないことです。

Google マップ コードは次のとおりです。

<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入力ラベルがあります。アラートでテストしました。

jQuery 入力コントロール

<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 の場所がわかりません。

前もって感謝します。

4

1 に答える 1

0

初期化関数を次のように変更します。

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

       ...........
    }
于 2012-05-19T17:39:27.810 に答える