<!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>

　　

google map 点击获取经纬度的更多相关文章

  1. 百度地图API-搜索地址、定位、点击获取经纬度并标注

    百度地图api:http://developer.baidu.com/map/jsdemo.htm api申请ak:http://lbsyun.baidu.com/ 一.搜索地址.定位.点击获取经纬度 ...

  2. Google Map API key 获取方法

    要想使用google map api 必须从google网站上获取key之后才有权限使用,但是要想申请key必须要有证明书,也就是所谓的MD5.下面一步一步来说明: 步骤1: 如果你使用的是eclip ...

  3. Google Map 根据坐标 获取地址信息

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.X ...

  4. 使用Javascript从Google Places搜索api获取纬度和经度

    如何使用谷歌地图搜索框api从搜索到的位置获取经度和纬度. 我使用与谷歌演示相同的代码 – https://developers.google.com/maps/documentation/javas ...

  5. Google Map API v2 （三）----- 地图上添加标记（Marker），标记info窗口，即指定经纬度获取地址字符串

    接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 private MarkerOptions mMarkOption; ...

  6. Android Google Maps API 网络服务用于网络定位、计算路线、获取经纬度、获取详细地址等

    extends:http://blog.csdn.net/h7870181/article/details/12505883 Google Maps API 网络服务 官网地址 : https://d ...

  7. 如何将经纬度利用Google Map API显示C# VS2005 Sample Code

    原文 如何将经纬度利用Google Map API显示C# VS2005 Sample Code 日前写了一篇如何用GPS抓取目前所在,并回传至资料库储存,这篇将会利用这些回报的资料,将它显示在地图上 ...

  8. 通过google地图的webservice根据城市名称获取经纬度

    谷歌Geocoding webservice接口获取经纬度信息,由于获取地点的数量级太大,2000多条记录,从response的xml格式中取出该地点的经纬度信息.google有访问限制,如果超出25 ...

  9. Google Map和桌面组件 Android开发教程

    本文节选于机械工业出版社推出的<Android应用开发揭秘>一 书,作者为杨丰盛.本书内容全面,详细讲解了Android框架.Android组件.用户界面开发.游戏开发.数据存储.多媒体开 ...

随机推荐

  1. debian分区方案（就这个看着靠谱点）转

    debian分区方案(就这个看着靠谱点)转 桌面系统/tmp 1G (仅用作临时文件) ext3/ext4/home Max (用户目录数据) ext3/ext4/usr 20G (软件) ext3/ ...

  2. Helpers\Tags

    Helpers\Tags The tags helper is a collection of useful methods: Tags::clean($data) Clean function to ...

  3. cocos2d-x 3.0 alpha1 生成Qt qch帮助文档

    Qt的助手挺好用的. 比chm好多了 cocos2d-x使用doxygen生成文档. 默认生成的是html形式, 需要打开浏览器, 这个是比较耗资源吧 可以修改配置, 让doxygen同时输出qch形 ...

  4. 小米2s使用Hexamob Recovery PRO恢复数据

    这东西对于手机来说, 真是神器啊 现在很多手机都是以MTP连接到电脑的, 所以在PC上是看不到盘符, 也就无法使用finaldata 之类的工具恢复了. 而像小米2S这样的手机, 无法外接SD卡, 则 ...

  5. Java中的Scoket编程

    网络编程是指编写运行在多个设备(计算机)的程序,这些设备都通过网络连接起来. java.net包中提供了两种常见的网络协议的支持: TCP: TCP是传输控制协议的缩写,它保障了两个应用程序之间的可靠 ...

  6. struts2.1笔记04：struts2优点

  7. Linux 下安装配置nginx及常见问题解答

    其实也不能完全算是原创吧!都是我配置nginx时所遇到的问题,查阅资料后总结起来.即是巩固一下nginx的配置,也是分享给新入Linux的童鞋们一些知识 好了,不多废话,进入主题吧! 为nginx添加 ...

  8. tomcat部署应用的几种方式

    接着上篇 tomcat配置详解,再来学习下如何在tomcat下部署应用 1.部署方式 第一种,最常用,直接把WAR包或者文件夹直接放到webapps目录下面,这时访问路径就是WAR包或者文件夹的名称. ...

  9. Android编程心得-ListView的Item高亮显示的办法

    在我们使用ListView的时候,经常会遇到某一项(Item)需要高亮显示的情况,如下图,有人说当我们点击子项的时候会变亮,但有时候业务逻辑需要让ITEM根据条件自动变亮,下面我来介绍一下我自己的解决 ...

  10. 关于Hadoop之父Doug Cutting

    生活中,可能所有人都间接用过他的作品,他是Lucene.Nutch .Hadoop等项目的发起人.是他,把高深莫测的搜索技术形成产品,贡献给普罗大众:还是他,打造了目前在云计算和大数据领域里如日中天的 ...