0

今日は Google マップの質問で大きな助けを得ており、コードを調べていると、より多くの情報が表示されます。ですから、ここで私が助けを得たいと思っている別の質問があります。

2つの部分があります

1)同じページに 2 つの Google マップを表示するようにコードを調整しました。私のGoogleマップはこのように機能します

ユーザーが住所を検索すると、結果は

  • 地図には場所のピンが表示されます
  • long フィールドと lat フィールドには座標が入力されます
  • オフィス名の入力フィールドには、検索クエリが入力されています。

これはすべて、マップが 1 つある場合に機能します。しかし、以下のコードに map2 を追加すると、結果を map と map2 に分割するコードの書き方がわかりません

My Codeの試行は次のとおりです（頭）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=true">
    </script>
<script type="text/javascript">

var geocoder;
var map,map2;

function initialize(condition) {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
    var mapOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);  
 }

function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
        document.getElementById("input_15_169").value = marker.getPosition().lat();
        document.getElementById("input_15_167").value = marker.getPosition().lng();
        document.getElementById("input_15_92").value = address;

      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

</script>

そして私の体はこのように見えます

<body onload="initialize()" onunload="GUnload()">
  <p>To Add your Google Map you must first plot your address by searching</p>
  <p>
    <input id="address" type="textbox" value="" placeholder="Search For Your Address">
    <input type="button" value="Plot Your Address" onclick="codeAddress()">
  </p>

  <div id="latlong">
      <p>Office Name: <input size="20" type="text" id="input_15_92" name="ofn" ></p>
      <p>Latitude: <input size="20" type="text" id="input_15_169" name="lat" ></p>
      <p>Longitude: <input size="20" type="text" id="input_15_167" name="lng" ></p>
    </div>

  <div id="map_canvas" style="width: 600px; height: 400px"></div>

  <p>To Add your Google Map you must first plot your address by searching</p>
  <p>
    <input id="address2" type="textbox" value="" placeholder="Search For Your Address">
    <input type="button" value="Plot Your Address" onclick="codeAddress()">
  </p>

  <div id="latlong">
      <p>Office Name: <input size="20" type="text" id="input_16_92" name="ofn" ></p>
      <p>Latitude: <input size="20" type="text" id="input_16_169" name="lat" ></p>
      <p>Longitude: <input size="20" type="text" id="input_16_167" name="lng" ></p>
    </div>

  <div id="map_canvas2" style="width: 600px; height: 400px"></div>

</body>
</html>

上記の現在の JavaScript では、次のような 2 番目のマップのフィールドにデータを入力するコードが不足していることはわかっていますが、どこに配置すればよいかわかりません

document.getElementById("input_16_169").value = marker.getPosition().lat();
document.getElementById("input_16_167").value = marker.getPosition().lng();
document.getElementById("input_16_92").value = address;

////

2) 2 番目の質問は、ズームに関するものです。zoom: 10,マップのズーム レベルを指定するコードの開始時にズーム レベルを設定できることがわかりました。結果が見つかったとき、つまりユーザーが検索した後、もう少しズームインしたいので、別のズームを使用できるかどうか疑問に思っていました!

前もって感謝します

4

1 に答える 1

1

別のマークアップをお勧めします。

次のように、入力とマップをフォームにラップします。

  <form style="width:220px;float:left;">
      <input name="address" value="" placeholder="Search For Your Address"/>
      <input type="button" value="Plot Your Address" onclick="codeAddress(this.form)"/>
      <input size="20" type="text"  name="ofn" />
      <input size="20" type="text" name="lat" />
      <input size="20" type="text"  name="lng" />
      <div class="map_canvas" style="width: 200px; height: 200px"></div>
  </form>

メリット：

マップの数を知らなくても、マップを動的にロードできるようになりました。document.querySelectorAll('form>.map_canvas');ループ内でマップを作成するために使用できる結果の nodeList で簡単に選択できます。

    var maps=document.querySelectorAll('form>.map_canvas');
    for(var i=0;i<maps.length;++i)
    {
        maps[i].parentNode.map=new google.maps.Map(maps[i], mapOptions);
    }

注:グローバル マップ変数を作成する代わりに、マップはフォームのプロパティとして保存されるため、後で次を使用してマップにアクセスできます。formElement.map

の呼び出しにも注意してください。これcodeAddress()には引数 がありthis.form、クリックされたボタンが属するフォームを参照します。

この引数を使用すると、目的のフォーム内の入力とマップにアクセスできます。

関数コードアドレス(フォーム) {

var address=form.address.value
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {

    form.map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: form.map,
        position: results[0].geometry.location
    });
    form.map.setZoom(18);
    form.lat.value = marker.getPosition().lat();
    form.lng.value = marker.getPosition().lng();
    form.ofn.value = address;

  } else {
    alert('Geocode was not successful for the following reason: ' + status);
  }
});

}

ズームは、マップの setZoom-method を使用して設定できます (私の提案では既に実装されています)。

デモ: http://jsfiddle.net/doktormolle/Tpgdd/

于 2012-10-20T01:26:59.573 に答える