google map 点击获取经纬度 

<!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;
    width: 46px !important;
    height: 54px !important;
}

#content {
  width: 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="width: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>

　　

posted @ 2015-07-30 09:32  Adtuu  阅读(924)  评论(0)    收藏  举报