<!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 vhost 访问权限配置

    apache的<directory>     </directory>语句,查考如下: 如何访问根目录下的目录http://192.168.1.12/test/ 第一．缺省ap ...

  2. jQuery 插件写法2

    转载:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented-m ...

  3. 在openshift上创建django应用

    python 3.3 + django 1.7 一.创建新应用 $ rhc app create -a mynewapp -t python-3.3 二.在新建的目录里添加git库 $ cd myne ...

  4. jsp无法支持el标签及jstl标签

    在jsp页面头部添加如下 <%@ page isELIgnored="false"%> <%@ taglib uri="http://java.sun. ...

  5. linux-进程相关

    ps查看当前运行的进程 ps -ef|grep httpd ps是静态的 ps -aux|grep httpd top 是动态的 kill 杀进程  kill -[选项] 进程号 -9强制杀死 kil ...

  6. linux-rm

    rm可以删除文件夹和文件 rm -rf强制删除不询问 rm /*    自杀绝技,赶紧跑吧 mkdir -p创建父目录 mkdir -p /tmp/wsb/dgl(wsb这个文件夹之前没有) rmdi ...

  7. 给jdk写注释系列之jdk1.6容器(9)-Strategy设计模式之Comparable&Comparator接口

    前面我们说TreeMap和TreeSet都是有顺序的集合,而顺序的维持是要靠一个比较器Comparator或者map的key实现Comparable接口.      既然说到排序,首先我们不用去关心什 ...

  8. 去掉VC2010 编辑器里出现的红色波浪线

    在VC2010中浏览代码的时候就大片的红线看着不舒服 其实不关VS的事,原因在于visual assist.   在VAssistX菜单栏->Visual Assist X Options-&g ...

  9. ip 子网掩码 网关 DNS

    这一篇文章也很好: 原文引用于:  http://www.cnblogs.com/jiqing9006/p/3365939.html 内外网ip: IP地址: IPv4地址分为A.B.C.D.E五类, ...

  10. 基于Selenium2+Java的UI自动化(5) - 执行JavaScript脚本

    一.操作日期选择框 QQ图片20161118215530.png1336x545 22.6 KB 说明:日期选择框大部分是不支持前端输入的,因为这个对象是 readOnly,只读属性,selenium ...