如何在地图中的HTML 5中显示自定义弹出窗口?下面是我的代码,显示当前位置和精确定位相同。当我点击精确定位时如何显示弹出窗口。
提前致谢。
<!DOCTYPE html>
<html>
<body>
<!--<button onclick="getLocation()">Try It</button>-->
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
getLocation();
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
} else{
x.innerHTML="Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='500px';
mapholder.style.width='1000px';
var myOptions={
center:latlon,
zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{
style:google.maps.NavigationControlStyle.SMALL
}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker(
{position:latlon,map:map,title:"You are here!"}
);
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable.";
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out.";
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred.";
break;
}
}
</script>
</body>
</html>