<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
img {
border-radius: 5px;
}
.image_border {
border: 2px solid red !important;
46px !important;
height: 54px !important;
}
#content {
800px;
height: 1000px;
border: 1px solid navy;
margin: auto;
padding: auto;
}
</style>
<script src="http://localhost/static/js/jquery-2.1.0.min.js" type="text/javascript" ></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>
</head>
<body>
<div id='content'>
<div id="map_canvas" style="100%; height:100%"></div>
</div>
</body>
</html>
<script type="text/javascript">
var marker;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644), // 显示地图的中心点位置
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
mapOptions
);
google.maps.event.addListener(map, 'click', function(event) {
alert(event.latLng);
if ('undefined' != typeof(marker)) {
marker.setMap(null);
};
marker = new google.maps.Marker({
map:map,
// 有动画效果
//draggable:true,
//animation: google.maps.Animation.DROP,
draggable:false,
position: event.latLng,
icon:'./image/photo_1.png'
});
google.maps.event.addListener(marker, 'click', toggleBounce);
});
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
google.maps.event.addDomListener(window, "load",initialize );
</script>