目前只是做了一个大学 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>