1

ユーザーの位置を表示するために、Google Maps Utilities Library V3 の Geolocation Marker Script を使用しています。

私が達成したいこと (私は Google Maps API の初心者です!) は次のとおりです。

  • ユーザーの現在の座標を表示します (たとえば、ページのどこかにある単純な CSS コンテナー内)。

  • イベントをマーカーに接続します。ユーザーが近くにいるときにトリガーする必要があります。

あなたの助けに感謝！

4

1 に答える 1

0

ユーザーに座標を表示するには、DOM 要素への参照が必要です。あとは、コンテンツを更新するだけです。

ページ上の HTML

<div id="UserCoordinates">Waiting on GPS Position ...</div>

スクリプト内

google.maps.event.addListener(GeoMarker, 'position_changed', function() {
  var UserPosition = this.getPosition();
  var DisplayElement = document.getElementById('UserCoordinates');
  if(UserPosition === null) {
    DisplayElement.innerHTML = 'Waiting on GPS Position...';
  } else {
    DisplayElement.innerHTML =
        'Current Position: ' + UserPosition.toUrlValue();
  }
});

これにより、ユーザーの現在の位置が変化したときに表示されます。フル スクリーン マップを引き続き使用する場合は、UserCoordinatesdiv をマップ コントロールとして実装することをお勧めします。API リファレンスには、これに関する優れた概要と複数の例があります。

ユーザーが X メートル以内にいるときに情報ウィンドウを表示する

処理するシナリオが複数あり、半径内を移動するときに情報ウィンドウを繰り返し開いてほしくないため、これは少し注意が必要です。

距離計算

コードに距離関数があるようですが、APIのSpherical Geometry ライブラリにあるものを使用することをお勧めします。API スクリプト タグを使用してライブラリを具体的にロードするだけです。

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true_or_false">
</script>

position_changed次に、イベント ハンドラーに追加する必要があります。

var IsWithinRadius = false; //assume they start outside of the circle
var RadiusInMeters = 1000; //within 1 km
var LocationOfInterest = map.getCenter();
google.maps.event.addListener(GeoMarker, 'position_changed', function() {
  var UserPosition = this.getPosition();
  var DisplayElement = document.getElementById('UserCoordinates');
  if(UserPosition === null) {
    DisplayElement.innerHTML = 'Waiting on GPS Position...';
    IsWithinRadius = false; //you don't know where they are
  } else {
    DisplayElement.innerHTML =
        'Current Position: ' + UserPosition.toUrlValue();
    var IsCurrentPositionInRadius =
        Math.abs(google.maps.geometry.spherical.computeDistanceBetween(
            UserPosition, LocationOfInterest)) <= RadiusInMeters;
    var JustEnteredRadius = !IsWithinRadius && IsCurrentPositionInRadius;
    IsWithinRadius = IsCurrentPositionInRadius;
    if(JustEnteredRadius) {
      //trigger action here.
      alert("Within raidus");
    }
  }
});
于 2013-10-31T15:33:02.987 に答える