我正在使用HTML和JavaScript构建一个移动应用程序，我希望在使用我已设置的自定义标记的用户上显示视频，照片或音频地图。我到目前为止的代码在下面。我的问题是，我如何认识到用户在我的标记周围，如何在到达该位置的用户上显示音频，视频，照片或文本？该媒体很可能会存储在我设置的SQL Server上。如果有人可以将我指向正确的方向，或者让我知道如何做到这一点，那将不胜感激。
谢谢！
到目前为止我的代码：
<!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>
我认为您可以为您的目的而喜欢此代码。
<!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>