<!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. apache配置--虚拟目录

    apache在httpd-vhosts.conf中 配置二级域名或者泛域名: <VirtualHost *:80>    ServerAdmin 846606478@qq.com    D ...

  2. JQuery EasyUI 之 DataGrid

    1.动态创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: (1)页面上添加div标签 <div id=&qu ...

  3. poj2388解题报告（排序）

    POJ 2388,题目链接http://poj.org/problem?id=2388 题意: 水题一道 给定n个数,输出中间值,可以用sort,干脆快捷. 代码: //396K 32MS #incl ...

  4. linux云计算集群架构学习笔记:rhel7基本命令操作

     1-3-RHEL7基本命令操作 1.1Linux终端介绍 Shell提示符 Bash Shell基本语法. 1.2基本命令的使用:ls.pwd.cd. 1.3查看系统和BIOS硬件时间. 1.4 L ...

  5. 打印W图案

    一:规律 二维图形的展示都可以使用二维数组来解决,W图形x轴0,1,2,1,0,1,2.....在0到2直接来回的徘徊 y轴是在一直递增........ 二:代码 @Test /** * 测试打印w图 ...

  6. 关于js中event的target和currentTarget的区别

    今天又遇到这个问题了,总是搞不清楚target和currentTarget的区别,百度搜索的时候看到一遍文章解释得很清楚,特意记录下录,以备不时之需: target与currentTarget的区别? ...

  7. Java事件总线

    在平时写代码的过程中,我们需要实现这样一种功能:当执行某个逻辑时,希望能够进行其他逻辑的处理.最粗暴的方法是直接依赖其他模块,调用该模块的相应函数或者方法.但是,这样做带来一些问题. 模块间相互依赖, ...

  8. PowerShell 解锁使用浏览器下载的文件

    1 dir *.* -Recurse | Unblock-File

  9. JavaScript常用的经典小技巧

    1.屏蔽鼠标右键 <--body 方式--> <body oncontextmenu="window.event.returnValue=false"> & ...

  10. 在swift中使用MJRefresh

    cocoapod导入的,并且桥接已经完成,但是就是不提示方法,醉了,