Question

我正在使用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>

Answer 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>

在谷歌地图中到达标记时显示自定义媒体

1 个答案: