1

この例に基づいて、Google MapsJavaScriptAPIを使用してアドレスをマッピングしようとしています。

https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple

ドキュメントでは、リクエストのクォータを処理するための最良の方法として、クライアント側のjavascriptアプローチを推奨しています。ここまでは順調ですね。私の問題は、この例から私の特定のケースに移行することです。私の住所はすでにデータベースにあるので、ユーザーが入力する必要はありません。また、地図をページと一緒にロードしたくありません。代わりに、ユーザーがリンクをクリックしたときにアドレスのマップをロードする必要があります。

initialize（）を使用してマップをdivにロードするスクリプトが機能しています。しかし、私の問題は、ジオコードで動作するように初期化することです。この例のジオコードは、私が望まないbodyonloadを使用した初期化ロードに依存しています。

これがコードです。何か提案をいただければ幸いです。

javascript

    var map;
    var geocoder;


     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
                });
              } else {
                alert('Geocode was not successful for the following reason: ' + status);
              }
            });
          }

      function initialize() {
    geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(40.7562008,-73.9903784);
        var myOptions = {
          zoom: 18,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      }

html

<input id="address" type="hidden" value="Palo Alto CA">
<a href="javascript:void(0)" onclick="initialize()">View map without geocoding</a>
<div id="map_canvas" style="width:300px; height:300px;"></div>
<a href="javascript:void(0)" onclick="codeAddress()">View map of geocoded address</a>
4

1 に答える 1

2

あなたのスクリプトで私が持っていた唯一の問題は、initialize()関数の次の行でした:

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

を宣言することにより、スクリプトは、スクリプトの先頭で宣言されたグローバル変数を使用するのではなく、var mapという名前のローカル変数を宣言するだけです。mapmap

を削除するvarと、スクリプトはグローバル変数を使用し、正常に実行されます。

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

最後に、リンクのクリック時にジオコードされたマップを読み込むには、onclickジオコードされた住所を に変更しますonclick="initialize();codeAddress();"。

追加した：

initialize()メソッドとcodeAddress()メソッドを次のように組み合わせてみてください。

function initialize() {
    geocoder = new google.maps.Geocoder();

    var address = document.getElementById('address').value;
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var myOptions = {
                zoom: 18,
                center: results[0].geometry.location,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

そして、initialize()あなたのリンクから電話するだけです。

基本的に、実行中の呼び出しを取得しgeocoder.geocode()、codeAddress()結果のデリゲート内でresults[0].geometry.location、マップを初期化するために使用しています。このように、一時的な緯度経度を表示する必要はありません。

于 2012-12-02T00:52:28.393 に答える