GoogleMapAPI获取地理位置信息资源-CSDN下载

共5个文件

css：2个

html：1个

png：1个

GoogleMap

JavaScript

5星 · 超过95%的资源需积分: 50 26 浏览量 2013-05-08 12:21:12 上传评论 2 收藏 5KB ZIP 举报

在IT领域，Google Map API是开发人员常用的工具之一，它允许我们通过JavaScript编程语言与Google Maps服务进行交互，获取和处理地理位置信息。本篇文章将详细探讨如何利用Google Map API来获取地点的经纬度坐标以及如何处理API返回的多个数据。让我们了解什么是Google Map API。Google Map API是Google提供的一套接口，它允许开发者在其应用程序中嵌入地图功能，或者通过HTTP请求获取地图相关的数据，如位置、路线、地理编码等。这个API是基于JavaScript构建的，可以在网页端轻松集成，为用户提供互动式的地图体验。要从Google Map API获取地理位置信息，首先你需要一个API密钥。这个密钥用于验证你的应用，确保它有权访问Google Maps服务。你可以通过Google Cloud Console创建并管理这些密钥。获取地点的经纬度坐标通常涉及到“地理编码”过程，即通过地点名称或地址转换成地理坐标（纬度和经度）。在JavaScript中，可以使用`geocoder.geocode()`方法来实现这一功能。以下是一个简单的示例： ```javascript function getCoordinates(location, callback) { var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': location }, function(results, status) { if (status === 'OK') { if (results[0]) { callback(results[0].geometry.location); } else { console.log('No results found'); } } else { console.log('Geocode was not successful for the following reason: ' + status); } }); } getCoordinates('北京市', function(position) { console.log('Latitude:', position.lat(), ', Longitude:', position.lng()); }); ``` 在这个例子中，我们创建了一个函数`getCoordinates`，传入地点名称和回调函数。`geocoder.geocode`方法被用来将地点名称转换为位置对象，然后回调函数处理返回的结果。当Google Map API返回多个数据时，这可能包括了多个可能的匹配结果，例如搜索“北京”可能返回北京市、北京市海淀区等多个地点。这时，我们需要遍历`results`数组，处理每一个结果。每个结果对象包含`formatted_address`（格式化的地址）、`geometry`（位置几何信息）等字段，我们可以根据需求选择合适的信息。例如，如果你想要列出所有匹配结果的地址，可以这样做： ```javascript function displayAllMatches(results) { results.forEach(function(result) { console.log(result.formatted_address); }); } ``` 在实际开发中，可能还需要考虑错误处理、API调用限制、缓存策略等问题，以确保应用的稳定性和性能。文件名`geoManager`可能代表了一个地理位置管理模块，这个模块可能包含了处理地理位置信息的逻辑，如批量获取、存储、更新和查询等功能。在实际项目中，这样的模块可以封装所有与Google Map API交互的代码，使得代码结构更加清晰，易于维护。 Google Map API是开发地理位置相关应用的强大工具。通过JavaScript，我们可以方便地获取地点的经纬度坐标，处理返回的多个数据，从而实现各种功能，如显示地图、定位用户、规划路线等。理解并熟练使用Google Map API，能极大地提升你的Web应用的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

geoManager.zip （5个子文件）

geoManager

addnewsArrow.png 2KB

solid-button.css 1KB

formListStyle.css 4KB

googleMapCore.js 2KB

geoManager.html 3KB

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="googleMapCore.js"></script> <script type="text/javascript" src="jQuery/jquery-form.js"></script> <link rel="stylesheet" type="text/css" href="formListStyle.css" /> <link rel="stylesheet" type="text/css" media="all" href="solid-button.css" /> <title>地图管理</title> </head> <body onload="initialize()"> <table align="center" class="outContainer" > <tr> <td> <div id="ListTitle"><p>地图信息列表</p></div> <div id="addNewsHref"><a href="userManager.php">用户管理</a></div> <div id="addNewsHref"><a>|</a></div> <div id="addNewsHref"><a href="relationManager.php">关系管理</a></div> <div id="addNewsHref"><a>|</a></div> <div id="addNewsHref"><a href="userState.php">用户状态</a></div> </td> </tr> <tr> <td> <p> </p> </td> </tr> <tr> <td> <form name="geoformFromGoogleMap" id="geoformFromGoogleMap" method="post" action=""> <table class="innerListContainer" align="center" cellSpacing=0 cellPadding=0> <tr class="listoption"> <td width="15%" ><p>地点名称</p></td> <td width="15%"><p>地理维度</p></td> <td width="15%"><p>地理经度</p></td> <td width="40%"><p>地点描述</p></td> </tr> <tr class="listItemLine0" id="setInputStyle"> <td class="hide"><input type="text" name="method" id="methodFGM"/> <td> <input type="text" name="geoName" id="geoNameFGM"></td> <td><input type="text" name="geoLat" id="geoLatFGM"></td> <td><input type="text" name="geoLng" id="geoLngFGM"></td> <td><input type="text" name="geoDesci" id="geoDesciFGM"></td> </tr> </table> <div id="solid-button"> <input class = "btn solid green" type="button" onclick="getLocation()" value="获取位置"/> <input class = "btn solid grey" type="button" onclick="AddFromGoogleMapClick()" value="添加"/> <input class = "btn solid blue" type="button" onclick="getNextGeoRecord()" value="下一条"/> <input class = "btn solid red" type="reset" onclick="onReset()" value="重置"/> </div> </form> </td> </tr> <tr> <td> </td> </tr> </table> <div id="map_canvas" style="width:90%; height:100%"></div> </body> </html>

评论收藏

内容反馈

yjhtxwd

2014-02-20

很不错，借鉴这个，我的程序已经跑起来了！谢谢
wdfaitianshi620

2013-09-02

是好东西，可惜不是我想要的，还是感谢楼主。。。。
杨柳兄

2014-04-04

很好，很强大。学习受益。
BroadWayStar

2013-09-18

不错，就是不是最新的！
mzmzlee

2013-07-23

html的，可惜不是我需要的，是一个直接可以运行了的页面。虽然我不太懂html，但我也没找到具体代码在哪啊，个人觉得吧，5分，可惜了。