1

I'm building a mobile application using HTML and JavaScript, I'm looking to have either a video, photo, or audio be displayed upon the user reaching a custom marker I have set on the map. The code I have so far is below. My question is how do I go about recognizing that the user is around my marker and how do I display audio, video, photos, or text upon the user reaching that location? This media will most likely be stored on a SQL server I've set up. If anyone can point me in the right direction, or let me know how to do this it would be much appreciated.

Thanks!

My code so far:

    <!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 回答