GLatLng座標にメッセージを追加するには、逆ジオコーディングのヘルプが必要です

StackOverflow https://stackoverflow.com/questions/816479

  •  03-07-2019
  •  | 
  •  

質問

私のコード： http://jsbin.com/epuxu

SOの助けを借りて、ジオコーディングされた住所とそれに対応するピンを地図に配置することができました。 問題、座標がもうないので、地図上に座標に#message divを追加するために座標を選択できないということです。

このセクションで何か間違ったことをしているのではないかと思う：

/* Message
--------------------*/
$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

    function displayPoint(marker, index){
        $("#message").hide();

        var moveEnd = GEvent.addListener(map, "moveend", function(){
            var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
            $("#message")
                .fadeIn()
                .css({ top:markerOffset.y, left:markerOffset.x });

            GEvent.removeListener(moveEnd);
        });
        map.panTo(marker.getLatLng());
    }

元の座標コードを使用すると機能します（jsbinでコメントアウトされています）：

var markers = [
    [39.729308,-121.854087],
    [39.0,-121.0]
    ];

    for (var i = 0; i < markers.length; i++) {
        var point = new GLatLng(markers[i][0], markers[i][1]);
        marker = new GMarker(point);
        map.addOverlay(marker);
        markers[i] = marker;
    }

しかし、この現在のコードで動作させるにはヘルプが必要です：

function showAddress(markers) {
    if (geocoder) {
        geocoder.getLatLng(markers,
            function(point) {
                if (!point) {
                    alert(markers + " not found");
                } else {
                    marker = new GMarker(point);
                    map.addOverlay(marker);
                    markers[i] = marker;
                }
            }
        );
    }
}

for (var i = 0; i < markers.length; i++) {
    showAddress(markers[i]);
}

GoogleマップAPIを利用するのは初めてなので、私が間違っていることについての洞察は非常に役立ちます。ありがとう=]

役に立ちましたか？

解決

あなたのコードにかなりの間違いがあったのではないかと思う：P

少し整形手術をしなければなりませんでしたが、結果は次のとおりです。 http://jsbin.com/atofe

以下は、私が行った変更の説明です。何かを理解するのに助けが必要な場合はお知らせください。

<script type="text/javascript">
  document.write(marker);
</script>

エラーを引き起こしていたため、これをコメントアウトする必要がありました。間違ってそこに置いてしまったと思います。

<script type="text/javascript">
  // document.write(marker);
</script>

var markers = [
  ["624 Nord Ave #20, Chico CA"],
  ["200 Nord Ave, Chico CA"],
  ["100 Nord Ave, Chico CA"],
  ["5th and Ivy, Chico CA"]
];

座標の代わりにアドレスを使用しているため、配列内の各文字列をカプセル化する必要はありません（実際、複雑になるだけなので、そうすべきではありません）。また、名前を addresses に変更して、より明確にし、実際のマーカーとの競合を防ぎます（詳細は後ほど）。

var addresses = [
  "624 Nord Ave #20, Chico CA",
  "200 Nord Ave, Chico CA",
  "100 Nord Ave, Chico CA",
  "5th and Ivy, Chico CA"
];

function showAddress(markers) {
  if (geocoder) {
    geocoder.getLatLng(markers,
      function(point) {
        if (!point) {
          alert(markers + " not found");
        } else {
          marker = new GMarker(point);
          map.addOverlay(marker);
          markers[i] = marker;
        }
      }
    );
  }
}

for (var i = 0; i < markers.length; i++) {
  showAddress(markers[i]);
}


/* Add Markers to List
--------------------*/
$(markers).each(function(i,marker){
  $("<li>")
    .html(i+" - "+marker)
    .click(function(){
      displayPoint(marker, i);
    })
    .appendTo("#list");
  GEvent.addListener(marker, "click", function(){
    displayPoint(marker, i);
  });
});

ここで、ほとんどの変更を行う必要がありました。 ここでいくつかの重大な間違いを犯しました。

最初に、新しい名前を使用する必要があるときに変数 markers を再使用しました。その過程で、アドレス文字列の配列を上書きし、保存場所を誤解しました（これが、アドレス文字列の配列の名前を addresses に変更した理由です）。

次に、ジオコーダーが実際に応答を返す前に、 リストにマーカーを追加しようとしました。 getLatLng は非同期関数であることに気付いていなかったと思うので、ジオコーダーが応答を返した後にのみコールバック関数を実行します。応答を待たなかったため、「リストにマーカーを追加」をレンダリングしました。マーカーがまだ取得されていなかったため、セクションは役に立ちません。

したがって、これらの問題を解決するために、「リストにマーカーを追加」を移動しました。新しい handleGeocoderResponse 関数内のセクション。これにより、ジオコーダーの応答が返された後にのみマーカーがリストに追加されます。また、二重の closure を使用する必要がありました。非同期関数とともにループを使用します。

function handleGeocoderResponse(addr, j) {
  /*
    These are closures. We have to return a function
    that contains our Geocoder repsonse handling code
    in order to capture the values of "addr" and "j"
    as they were when they were passed in.  
  */
  return (function(point) {

    if (!point) {
      alert(addr + " not found");
    }
    else {
      var marker = new GMarker(point);
      map.addOverlay(marker);

      /* Add markers to list
      ------------------------*/
      $("<li>")
        .html(j + " - " + addr)
        .click(function(){
          displayPoint(marker, j);
        })
        .appendTo("#list");

      GEvent.addListener(marker, "click", function(){
        displayPoint(marker, j);
      });
    }

  });
}

for (var i = 0; i < addresses.length; i++) {
  if (geocoder) {
    var address = addresses[i];
    geocoder.getLatLng(
      address,
      handleGeocoderResponse(address, i)
    );
  }
}

他のヒント

あなたが正確に何を探しているのか分かりません。 ＆quot; #message div ＆quot;とは、 infowindow.html "rel =" nofollow noreferrer ">これ？その場合、次の行で何かを行うことができます（ GEvent.addListener（）行に注意してください）：

/* Geocoded Addresses
--------------------*/
var markers = [
 ["624 Nord Ave #20, Chico CA"],
 ["200 Nord Ave, Chico CA"],
 ["100 Nord Ave, Chico CA"],
 ["5th and Ivy, Chico CA"]
];

function showAddress(markers) {
 if (geocoder) {
  geocoder.getLatLng(markers,
   function(point) {
    if (!point) {
     alert(markers + " not found");
    } else {
     marker = new GMarker(point);
     GEvent.addListener(marker, 'click', function() {
      marker.openInfoWindowHtml('<strong>Awesome place</strong><br>746 Blah street<br>1337 Awesomeville');
     });
     map.addOverlay(marker);
     markers[i] = marker;
    }
   }
  );
 }
}

for (var i = 0; i < markers.length; i++) {
 showAddress(markers[i]);
}

試してみる、マーカーをクリックしてください！ ：）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top