1

目前只是做了一个大学 GIS 项目,它允许用户拍摄他们看到的鸟类的照片,并在他们发现它们的地方用谷歌地图上的标记上传它们。

我设法获得了地理位置,添加了标记和可点击的信息窗口,但是有没有人知道如何允许用户在这个信息窗口中上传照片?

另外我应该如何存储它们,以便在用户上传它们后它们留在地图上?

我已经包含了我的代码和到目前为止我所拥有的图像!

任何帮助将不胜感激,我觉得我正在用它撕掉我的头发。

干杯,

劳拉

<script>

  //The user will be prompted to give consent to geolocation.

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 6
    });
    var marker = new google.maps.Marker({map: map, draggable: true});

    //HTML5 geolocation.

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        marker.setPosition(pos);
        map.setCenter(pos);
        }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });

    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, marker, map.getCenter());
    }
    // Create the info window content   
var infoWindowContent = '<div class="info_content">' +
    "<table>" +
             "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
             "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
             "<tr><td>Type:</td> <td><select id='type'>" +
             "<option value='bird' SELECTED>bird</option>" +
             "<option value='bird'>bird</option>" +
             "</select> </td></tr>" +
             "<tr><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>" +
             "<tr><td><input type='button' value='Add Image' onclick='saveData()'/></td></tr>"; +

'</div>';



   // Display our info window when the marker is clicked
    var infoWindow = new google.maps.InfoWindow({
    content: infoWindowContent
});
    google.maps.event.addListener(marker, 'click', function() {
    infoWindow.open(map, marker);
}); 

  }

  function handleLocationError(browserHasGeolocation, marker, pos) {
    marker.setPosition(pos);
    marker.setContent(browserHasGeolocation ?
                          'Error: The Geolocation service failed.' :
                          'Error: Your browser doesn\'t support geolocation.');
  }


    </script>

https://i.stack.imgur.com/156UQ.png

4

0 回答 0