<!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. java_线程安全-service

    package com.demo.test; import java.util.Collections; import java.util.HashMap; import java.util.Map; ...

  2. java_类承继其他类的内部类例子

    package ming; class Outer { class In { public In(String msg) { System.out.println(msg); } } } public ...

  3. 自动监控主从MySQL同步的SHELL脚本

    代码如下: #!/bin/bash #check MySQL_Slave Status #crontab time 00:10 MYSQLPORT=`netstat -na|grep "LI ...

  4. Redis 安全

      我们可以通过 redis 的配置文件设置密码参数,这样客户端连接到 redis 服务就需要密码验证,这样可以让你的 redis 服务更安全. 实例 我们可以通过以下命令查看是否设置了密码验证: 1 ...

  5. HDU 3335 Divisibility (DLX)

    Divisibility Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit ...

  6. IIS 7.0、IIS 7.5 和 IIS 8.0 中的 HTTP 状态代码 转

    http://support.microsoft.com/kb/943891/zh-cn 日志文件位置 默认情况下,IIS 7.0.IIS 7.5 和 IIS 8.0 将日志文件放在以下文件夹中: i ...

  7. poj 2823 单调队列

    思路:裸的单调队列. #include<iostream> #include<cstring> #include<cstdio> #include<algor ...

  8. 定义label标签宽度需要设置display:inline-block;

    label{    display:inline-block;     width:120px;    line-height:22px;    text-align: right;}

  9. Linux 命令 - watch: 反复执行命令，全屏显示输出

    watch 命令周期性地执行命令,全屏显示输出.可以通过 watch 命令反复执行某一程序来监视它的输出变化. 命令格式 watch [-dhvt] [-n <seconds>] [--d ...

  10. ZooKeeper(3.4.5) - 开源客户端 Curator(2.7.0) 的简单示例

    一.创建会话 1. 创建会话 package com.huey.dream.demo; import org.apache.curator.framework.CuratorFramework; im ...