自己的项目中有获取当前点击的坐标经纬度或者获取当前街道的信息的需求。
估计这个对于新手来说,还是比较麻烦的,因为从官网上找这个也并不是很好找,要找好久的,运气好的可能会一下子找到。

献上自己写的测试案例。代码如下:

<!DOCTYPE html>
<html> <head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
} #map {
height: 100%;
}
</style>
</head> <body>
<div id="map"></div>
<script>
function initMap() {
var myLatlng = {
lat: 39.921323,
lng: 116.426239
};
var marker ;
var markersArray = [];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatlng
});
// ---- Google隐藏 ----
var isFirstLoad=true;
//地图瓦片加载完成之后的回调
google.maps.event.addListener(map, 'tilesloaded', function () {
if (isFirstLoad) {
hideLogo();
isFirstLoad=false;
}
});
function hideLogo() {
$("#map .gm-style-cc").hide();
$("#map [title='点击以在 Google 地图上查看此区域']").hide();
}
// ---- Google隐藏 ----
map.addListener('click', function(e) {
addMarker(e.latLng, map);
//根据经纬度获取 当前地理信息
var latLngData = e.latLng.lat().toFixed(6)+','+e.latLng.lng().toFixed(6);
console.log(latLngData)
$.ajax({
type:"post",
url:"https://maps.googleapis.com/maps/api/geocode/json?latlng="+latLngData+"&location_type=ROOFTOP&result_type=street_address&key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE",
async:true,
success:function(data){
console.log(data)
var site = latLngData+'<br />'+data.results[0].formatted_address;
console.log(site)
var infowindow = new google.maps.InfoWindow({
content: site
});
infowindow.open(map,marker); //弹出信息提示窗口
}
}); });
//添加坐标对象
function addMarker(latLng, map) {
if(markersArray.length>0){
markersArray[0].setMap(null);
};
markersArray.shift(marker)
marker = new google.maps.Marker({
position: latLng,
map: map
});
markersArray.push(marker);
}
}
</script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE&callback=initMap" async defer></script>
</body> </html>
<script>
$(window).load(function(){
//$("#map [title='点击以在 Google 地图上查看此区域']").hide();
//$('.gm-style-cc').hide();
});
</script>

注意:请引入自己本地的jquery,因为要用的ajax请求,谷歌的地理服务接口。

代码的核心就在于请求的URL:

url:"https://maps.googleapis.com/maps/api/geocode/json?latlng="+latLngData+"&location_type=ROOFTOP&result_type=street_address&key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE"

这个是经纬度反向地理编码, 这段url里有四个参数:latlnglocation_typeresult_typekey,具体概念以及参数详解,请参考下一章的 谷歌地图API 开发 之 Geocoding API

谷歌地图 API 开发之获取坐标以及街道详情的更多相关文章

  1. 谷歌地图 API 开发之添加标记(解析以及补充)

    今天又看了下官网,发现官网上有地图标记的详细说明.当时居然眼瞎看不见,还琢磨了好久...#$%^&,一定是项目太急,没看到(^o^)/~地址:https://developers.google ...

  2. 谷歌地图 API 开发之信息窗口

    信息窗口 简介 InfoWindow 在地图上方给定位置的弹出窗口中显示内容(通常为文本或图像).信息窗口具有一个内容区域和一个锥形柄.柄顶部与地图上的某指定位置相连. 通常,您会将信息窗口附加到标记 ...

  3. 百度地图api开发:根据坐标获得地理描述地址

    // 创建地理编码实例              var myGeo = new BMap.Geocoder();              // 根据坐标得到地址描述            myGe ...

  4. 谷歌地图api 开发 (转载)

    https://www.cnblogs.com/520lin/p/5800024.html

  5. 深入浅出百度地图API开发系列(1):前言

    百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能 ...

  6. 深入浅出百度地图API开发系列(2):创建地图

    上一篇文章里,先介绍了一下百度地图API开发所涉及到的一些基础概念,包括投影,坐标系等基础概念,再有了这些基础后,我们可以开始开发自己的web地图了.先来个代码示例(建议大家都是用百度地图API大众版 ...

  7. 基于MFC与第三方类CWebPage的百度地图API开发范例

    在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地 ...

  8. 【百度地图API】自行获取区域经纬度的工具

    原文:[百度地图API]自行获取区域经纬度的工具 摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...

  9. js基于谷歌地图API绘制可编辑圆形与多边形

    之前的工作中需要在谷歌地图上绘制可编辑多边形区域,所以基于谷歌地图API封装了个html页面,通过调用js绘制多边形并返回各点的经纬度坐标:当然首先你要保证你的电脑可以打开谷歌地图... 新建一个ht ...

随机推荐

  1. PhpStudy2018后门漏洞预警及漏洞复现&检测和执行POC脚本

    PhpStudy2018后门漏洞预警及漏洞复现&检测和执行POC脚本 phpstudy介绍 Phpstudy是国内的一款免费的PHP调试环境的程序集成包,其通过集成Apache.PHP.MyS ...

  2. 星空:差分,状压dp

    总算不再是能用暴力卡常/随机化水过的好T3了. 说是打了两个标签,实际上最关键的是题意转化. 如果你丝毫不转化的话也可以: #include<bits/stdc++.h> using na ...

  3. Hive数据仓库你了解了吗

    在工作中我们经常使用的数据库,数据库一般存放的我们系统中常用的数据,一般为百万级别.如果数据量庞大,达到千万级.亿级又需要对他们进行关联运算,该怎么办呢? 前面我们已经介绍了HDFS和MapReduc ...

  4. Oracle“ORA-00911: 无效字符”解决方式

    在工作中碰到ORA-00911:无效字符的问题, 代码如下: <select id="querySendMsg" parameterType="map" ...

  5. it公司比较

    1:本人西电通院2013届毕业硕士,根据今年找工作的情况以及身边同学的汇总,总结各大公司的待遇如下,吐血奉献给各位学弟学妹,公司比较全,你想去的公司不在这里面,基本上是无名小公司了:但无名小公司有时也 ...

  6. redis 数据库主从不一致问题解决方案

     在聊数据库与缓存一致性问题之前,先聊聊数据库主库与从库的一致性问题. 问:常见的数据库集群架构如何? 答:一主多从,主从同步,读写分离. 如上图: (1)一个主库提供写服务 (2)多个从库提供读服务 ...

  7. [java笔记] 最近学的一些笔记

    1.@Override的用法 2.父类的返回值类型的范围,与子类返回值类型的返回的大小关系: 3.子类方法的权限修饰符,与子类方法的权限修饰符: 4.如果p1是一个对象,p2也是个对象,那么代码p1= ...

  8. 导入maven项目pom报错

    打开window->preferences->maven->user settings更换settings.xml即可

  9. 修改 processor.php 文件,监听用户对该应用的消息

    修改 processor.php 文件,监听用户对该应用的消息 class cgc_fdModuleProcessor extends WeModuleProcessor { public funct ...

  10. 控制层传递参数到jsp页面,jsp页面进行接收

    在java代码中,控制层方法如下(采用model,还有其他方式) public String mysave(MyTreeMould myTreeMould, Model model) {...... ...