我正在使用 HTML 和 JavaScript 构建移动应用程序，我希望在用户到达我在 map 上设置的自定义标记时显示视频、照片或音频。到目前为止我的代码如下。我的问题是如何识别用户在我的标记周围以及如何在用户到达该位置时显示音频、视频、照片或文本？该媒体很可能存储在我设置的 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>
最佳答案
我认为您可以出于您的目的喜欢此代码。
<!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>
关于javascript - 到达谷歌地图中的标记时显示自定义媒体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13353772/