<!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. Qt for iOS，Qt 与Objective C混合编程

    项目设置 既然要聊 Qt 混合 OC 编程,首先要简单介绍一下 Objective C .我只有一句话:Go,问搜索引擎去.因为我所知实在有限,怕误导了您.当然如果您不怕,往下看吧. OC源文件介绍 ...

  2. Debian下的PPPOE服务器配置

    参考: http://blog.csdn.net/zhangwenjianqin/article/details/7655375 http://blog.sina.com.cn/s/blog_8043 ...

  3. Cheap CK100 1024 tokens NXP FIX Chip on Eobd2

    CK100 is a well-known and cost-effective key programmer for many cars. Some said it is a must for bo ...

  4. oracle的控制语句if和循环语句loop while for

    pl/sql的控制结构if-then if-then-else if-then-elsif-else 案例1:编写一个过程,可以输入一个雇员名,如果该雇员的工资低于2000,就给该雇员工资增加10% ...

  5. Uva120 Stacks of Flapjacks 翻煎饼

    水水题.给出煎饼数列, 一次只能让第一个到第i个数列全部反转,要求把数列排序为升序. 算法点破后不值几钱... 只要想办法把最大的煎饼放到最后一个,然后就变成前面那些煎饼的数列的子题目了.递归或循环即 ...

  6. iPhone screen size

      iPhone 4 iPhone 5 iPhone 6 iPhone 6 Plus Display Size 3.5 in 4 in 4.7 in 5.5 in Screen Size 320 x ...

  7. vsftp安装与配置

    配置参考:https://help.aliyun.com/knowledge_detail/5973912.html?spm=5176.776701992.0.0.3X2PB8 553 Could n ...

  8. JavaScript中常用函数(入门级)(持续更新)

    本文中枫竹梦介绍一些JavaScript中入门级的常用函数,对于已经过了入门的童鞋可选择略过,都是一些非常实用的函数.如果发现什么问题,欢迎讨论. 问题列表 Q1: 设计一个函数repeatIt(st ...

  9. [改善Java代码]构造函数尽量简化

    建议34: 构造函数尽量简化 我们知道在通过new关键字生成对象时必然会调用构造函数,构造函数的简繁情况会直接影响实例对象的创建是否繁琐.在项目开发中,我们一般都会制订构造函数尽量简单,尽可能不抛异常 ...

  10. 【转】六年软件测试感悟-从博彦到VMware

    不知不觉已经从事软件测试六年了,2006毕业到进入外包公司外包给微软做软件测试, 到现在加入著名的外企.六年的时间过得真快. 长期的测试工作也让我对软件测试有了比较深入的认识.但是我至今还是一个底层的 ...