撰写
想要做如图效果，点击按钮 下面出现shop?list?根据网上的代码改编了一下，
<!DOCTYPE html>
<html>
<head>
<title></title>
<metahttp-equiv=”Content-Type”content=”text/html; charset=UTF-8″>
<scriptsrc=”http://maps.google.com/maps/api/js?sensor=true”></script>
</head>
<body>
<divid=”map”>
</div>
</body>
</html>
<script>
window.onload = getMyLocation;
function getMyLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
displayLocation, // if geoloacation is avilable, getCurrentPostion will sent the latitude,
displayError); // and the longitude info to the function displayLocation
}
else {
alert(“Oops, no geolocation support”);
}
}
function displayLocation(position) {
showMap(position.coords); //using google Maps API to show map in div
}
function showMap(coords) {
vargoogleLatAndLong = newgoogle.maps.LatLng(coords.latitude, coords.longitude);
vargoogleLatAndLong1 = newgoogle.maps.LatLng(34.254875,108.885926);
varmapOptions = {
zoom:10,
center:googleLatAndLong,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
varmapDiv = document.getElementById(“map”);
map = newgoogle.maps.Map(mapDiv, mapOptions);
vartitle = “Your location”;
varcontent = “You are at Latitude: ” + coords.latitude + “, Longitude: ” + coords.longitude;
addMarker(map, googleLatAndLong, title, content,’测试数据’);
addMarker(map, googleLatAndLong1, ‘dddd’, ‘catherine’,’catherine测试数据’);
}
function addMarker(map, latlong, title, content,test){
varmarkerOptions = {
position:latlong,
map:map,
title:title,
clickable:true,
test:test
};
varmarker = newgoogle.maps.Marker(markerOptions);
varinfoWindowOptions ={
content:content,
position:latlong
};
varinfoWindow = newgoogle.maps.InfoWindow(infoWindowOptions);
google.maps.event.addListener(marker,”click”,function(){
infoWindow.open(map);
})
marker.addListener(‘click’, function() {
console.log(marker)
//todo?你想要的点击事件
});
}
function displayError(error) {
varerrorTypes = {
0:”Unknown error”,
1:”Permission denied”,
2:”Position is not available”,
3:”Request timeout”
};
varerrorMessage = errorTypes[error.code];
if (error.code == 0 || error.code == 2) {
errorMessage = errorMessage + ” ” + error.message;
}
vardiv = document.getElementById(“location”);
div.innerHTML = errorMessage;
}
</script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 10px;
}
form, div#location, div#distance {
padding: 5px;
}
div#map {
margin: 5px;
width: 400px;
height: 400px;
border: 1pxsolidblack;
}
</style>
asdf