1

HTML と JavaScript を使用してモバイル アプリケーションを構築しています。マップ上に設定したカスタム マーカーにユーザーが到達したときに、ビデオ、写真、またはオーディオを表示することを検討しています。私がこれまでに持っているコードは以下のとおりです。私の質問は、ユーザーが自分のマーカーの周りにいることをどのように認識し、ユーザーがその場所に到達したときにオーディオ、ビデオ、写真、またはテキストを表示するにはどうすればよいですか? このメディアは、私がセットアップした SQL サーバーに保存される可能性が高いです。誰かが私を正しい方向に向けることができれば、またはこれを行う方法を教えていただければ幸いです。

ありがとう！

これまでの私のコード:

    <!doctype  html>
    <html>
    <head>
        <title>Application Demo</title>
        <meta name="viewport" conmtent="width=device-width, initial-scale=1.0,     user-scalable=no">
        <meta charset="utf-8">
            <style>
                html, body, #mapcanvas {
                    margin: 0;
                    padding: 0;
                    height: 98%;
                    }
            </style>
            <script src="https://maps.googleapis.com/maps/api/js?    v=3.exp&sensor=false"></script>
             <script>
      var map;

      var coords = new google.maps.LatLng(36.995698, -86.762123);
      function initialize() {
        var mapOptions = {
          zoom: 18,
          center: coords,
          mapTypeId: google.maps.MapTypeId.HYBRID

            };
        map = new google.maps.Map(document.getElementById('mapcanvas'),
            mapOptions);
        var marker = new google.maps.Marker({
            position: coords,
            map: map,
            title: 'ITE',
            });
            }
    </script>
    </head>
    <body onload="initialize()">
        <div id="mapcanvas"></div>
        <div>
                <p>Maps provided by Google Maps</p>
        </div>
    </body>
</html>
4

1 に答える 1

1

目的に合わせてこのコードをお気に入りにできると思います。

<!DOCTYPE html>
<html>
  <head>
    <title>Application Demo</title>
    <meta name="viewport" conmtent="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #mapcanvas {
        margin: 0;
        padding: 0;
        height: 98%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
      var map;
      var positions = [
        {lat : 36.995, lng : -86.764, "id" : "12345", pos : null, marker : null},
        {lat : 36.996, lng : -86.762, "id" : "67890", pos : null, marker : null}
      ];

      function initialize() {
        var coords = new google.maps.LatLng(36.995698, -86.762123);
        var mapOptions = {
          zoom : 18,
          center : coords,
          mapTypeId : google.maps.MapTypeId.HYBRID
        };
        map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
        google.maps.event.addListenerOnce(map, "bounds_changed", watchStart);

        var i;
        for (i = 0; i < positions.length; i++) {
          positions[i].pos = new google.maps.LatLng(positions[i].lat, positions[i].lng);
        }

      }

      //Check Geolocation API of HTML5
      function watchStart() {
        if (navigator.geolocation) {
          navigator.geolocation.watchPosition(showPosition);
        } else {
          alert("Geolocation is not supported by this browser.");
        }
      }

      function createMarker(options) {
        var marker = new google.maps.Marker(options);
        google.maps.event.addListener(marker, "click", onMarker_clicked);
        return marker;
      }

      function onMarker_clicked() {
        alert(this.get("id"));
      }


      function showPosition(position) {
        var nowPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.panTo(nowPos);

        var distance, bounds = map.getBounds();
        for (var i = 0; i < positions.length; i++) {
          if (bounds.contains(positions[i].pos)) {
            if (!positions[i].marker) {
              //The markers which are inside of the map.
              positions[i].marker = createMarker({
                position : positions[i].pos,
                map : map,
                id : positions[i].id
              });
            }
          } else if (positions[i].marker){
            //The markers which are out side of the map.
            positions[i].marker.setMap(null);
            delete positions[i].marker;
          }
        }
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="mapcanvas"></div>
    <div>
      <p>
        Maps provided by Google Maps
      </p>
    </div>
  </body>
</html>
于 2012-11-13T04:17:58.497 に答える