Google Map API抓取地图坐标信息小程序
因为实验室需要全国城市乡镇的地理坐标，有Execl的地名信息，需要一一查找地方的经纬度。Google Map地图实验室提供自带的查找经纬度的方法，不过需要一个点一个点的手输入，过于繁琐，所以自己利用Google Map API编写了一个很小的程序，根据需要有多个版本，挺方便的。
不过还要提一下，利用Baidu Map API 的localsearch很方便查找位于一个城市的街道、城镇或其他信息，比如我要搜索北京市的所有肯德基的地理坐标，如下代码就可以满足：
<title>批量获取模糊搜索地址名称及坐标</title> <meta name="Keywords" content="批量,获取坐标,模糊搜索">
<meta name="Description" content="本网页提供了批量搜索地名并返回地址及坐标的功能！"> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> </head> <body>
<P>搜索城市<input id="txtCity" type="text" value="北京市" /></n>
<p>地名关键词<input id="txtSearch" type="text" value="肯德基" />
<input type="button" value="生成坐标序列" onclick="search()" /> </n>
<p>显示结果<textarea id="txtResult" rows="10" cols="30" value="" /></textarea> <div id="divMap" style="width:400px;height:400px;border:solid 1px gray"></div> <script type="text/javascript">
function $(id){
return document.getElementById(id);//定义$,以便调用
}
var map = new BMap.Map("divMap");//创建地图
var city=new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}}); function search(){
$("txtResult").value=""//每次生成前清空文本域
map.clearOverlays(); //清除地图上所有标记
var c=$("txtCity").value;
city.search(c);//查找城市
var s=$("txtSearch").value;
var ls = new BMap.LocalSearch(c);
ls.search(s);
var i=1; ls.setSearchCompleteCallback(function(rs){
if (ls.getStatus() == BMAP_STATUS_SUCCESS){
for(j=0;j<rs.getCurrentNumPois();j++)
{
var poi=rs.getPoi(j);
map.addOverlay(new BMap.Marker(poi.point)); //如果查询到，则添加红色marker $("txtResult").value+= poi.title+":" +poi.point.lng+","+poi.point.lat+'\n'; }
if(rs.getPageIndex!=rs.getNumPages())
{
ls.gotoPage(i);
i=i+1;
}
}});}
</script>
</body>
</html>
不过由于百度地图坐标是经过加密的，没有办法和已知的WGS坐标联系起来，所以选择了放弃。而翻看了许多资料才发现，对应的Google Map API 则没有了localsearch这个函数（在10年左右封掉了），只能利用getLatLng()函数一个一个的查询
参考了网上的一个抓一个点的代码，该代码可以完成一个点一个点的查询经纬度的功能：
<!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>地理位置坐标转换</title> <script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAe3YR_oZq7RQougOHlEQYxRTrT8HRiYVHGz6s-cexYhuHznMTnBQJ3hrfCSvSmQ_Fqr80B62kDy8djA&sensor=true"
type="text/javascript"></script> <script type="text/javascript">
window.g = {};
window.$ = function (id) { return document.getElementById(id) };
window.onload = function () {
if (GBrowserIsCompatible()) {
g.map = new GMap2($("map"));
//加载google地图控件
g.map.addControl(new GLargeMapControl());
g.map.addControl(new GMapTypeControl());
g.map.addControl(new GScaleControl());
//实例化google客户端地理编码类(GClientGeocoder)
g.geocoder = new GClientGeocoder(); g.getCoordinates = function (address) {
g.geocoder.getLatLng(
address,
function (point) {
if (point) {
alert(point.lat());
alert(point.lng()); g.map.setCenter(point, 13);
var marker = new GMarker(point);
g.map.addOverlay(marker);
var info = "<strong>" + address + "</strong><br />坐标: " + point.lat() + "," + point.lng();
$("info").innerHTML = info;
marker.openInfoWindowHtml(info);
marker.__address_info = info;
GEvent.addListener(marker, "click", function () {
g.map.setCenter(this.getLatLng());
this.openInfoWindowHtml(this.__address_info);
$("info").innerHTML = info;
});
}
else {
alert("无法解析: " + address);
}
}
)
} $("btn_go").onclick = function () {
g.getCoordinates($("address").value);
}
$("btn_go").onclick();
}
else {
alert('不支持的浏览器');
}
}
window.onunload = function () {
GUnload();
}
</script>
<style media="screen">
body
{
margin: 0;
padding: 0;
font-size: 9pt;
line-height: 1.5em;
}
#frame
{
width: 700px;
margin: 20px auto 10px;
}
#form
{
margin: 0 0 10px;
text-align: center;
}
#form input
{
border: 1px solid #ccc;
font-size: 9pt;
width: 200px;
}
#form button
{
font-size: 9pt;
border: 1px solid #ccc;
}
#form button:hover
{
background: #eef;
}
#map
{
height: 400px;
margin: 0 0 10px;
border: 5px solid #ccc;
}
#vifix
{
text-align: center;
}
#vifix a
{
color: #f00;
text-decoration: none;
}
#vifix a:hover
{
color: #f96;
}
</style>
</head>
<body>
<div id="frame">
<div id="form">
输入一个地址:
<input id="address" value="杭州市西湖三潭印月" />
<button id="btn_go">
获取坐标</button>
</div>
<div id="map">
</div>
<div id="info">
</div>
<div id="vifix">
Powered by <a href="http://code.google.com/apis/maps/" target="_blank">Google Map API</a>
/ Created by <a href="http://vifix.cn%22%3evifix.cn%3c/a>
</div>
</div>
</body>
</html>
我则是删除了其中的地图显示和标记的功能，简化之后的第一个版本是，必须按照一定的文本格式输入，循环查询多个地名坐标：
<!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>地理位置坐标转换</title>
<style media="screen">
body
{
margin: 0;
padding: 0;
font-size: 9pt;
line-height: 1.5em;
}
#frame
{
width: 1200px;
margin: 20px auto 10px;
}
#searchMap
{
margin: 0 0 10px;
text-align: center;
} # button
{
font-size: 9pt;
border: 1px solid #ccc;
} #txtRight,#txtLeft{
float: left;
}
#result{
margin-left: 200px;
height: 200px;
}
#searchMap button:hover
{
background: #eef;
}
#vifix
{
text-align: center;
}
#vifix a
{
color: #f00;
text-decoration: none;
}
#vifix a:hover
{
color: #f96;
}
</style>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAe3YR_oZq7RQougOHlEQYxRTrT8HRiYVHGz6s-cexYhuHznMTnBQJ3hrfCSvSmQ_Fqr80B62kDy8djA&sensor=true"
type="text/javascript"></script>
<script type="text/javascript"> window.g = {};
window.$ = function (id) { return document.getElementById(id) };
window.onload = function () {
if (GBrowserIsCompatible()) {
g.map = new GMap2($("map"));
//加载google地图控件
g.map.addControl(new GLargeMapControl());
g.map.addControl(new GMapTypeControl());
g.map.addControl(new GScaleControl());
//实例化google客户端地理编码类(GClientGeocoder)
g.geocoder = new GClientGeocoder(); g.getCoordinates = function (address) {
g.geocoder.getLatLng(
address,
function (point) {
if (point) { var infoReasult =address+" "+point.lat() +" "+ point.lng()+'\n'; $("txtResult").value+=infoReasult // var infoArea=address+'\n'; //$("txtArea").value+=infoArea; }
else { var unfound="没有查询到的点有：<br />";
$("unfound").innerHTML=unfound;
$("unfound").innerHTML+=address+"<br />";
}
}
)
} $("btn_go").onclick = function () {
$("info").innerHTML="";
$("txtResult").value="";
// $("txtArea").value=""; var strSearch=$("txtSearch").value;
var addresses=strSearch.split('\n');
console.log(addresses); var strProvince=addresses[0].split('(')[0];
var strCity=addresses[1].split('(')[0];
var strTown=addresses[2].split('(')[0];
var strPrefix=strProvince+strCity+strTown; for(var i=3;i<addresses.length&&addresses[i]!="";i++){ // console.log(strPrefix+addresses[i]);
g.getCoordinates(strPrefix+addresses[i]); } }
$("btn_go").onclick();
}
else {
alert('不支持的浏览器');
}
}
window.onunload = function () {
GUnload();
}
</script> </head>
<body>
<div id="frame"> <div id="searchMap"> <p>输入查询的点（用回车分开）</p><button id="btn_go">获取坐标</button><br/>
<textarea id="txtSearch" rows="20" cols="40"/>第一行为省份：江苏省(349街道，836镇，
第二行为城市：南京市(81街道，19镇)
第三行为市区：玄武区(7街道)
第四行以下为街道
如：
江苏省(349街道，836镇，
南京市(81街道，19镇)
玄武区(7街道)
锁金村街道
红山街道 </textarea> <div id="info">
</div>
<div id="result">
<p>查询结果:</p> <div id="txtRight"><textarea id="txtResult" rows="10" cols="70" value="" /></textarea></div>
<div id="unfound">
</div>
</div>
</div> <div id="map">
</div>
<div id="vifix">
Powered by <a href="http://code.google.com/apis/maps/" target="_blank">Google Map API</a>
/ Created by <a href="http://vifix.cn%22%3evifix.cn%3c/a>
</div>
</div>
</body>
</html>
后来又由于实验室的要求，增加了分割的版本：
<!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>地理位置坐标转换</title>
<style media="screen">
body
{
margin: 0;
padding: 0;
font-size: 9pt;
line-height: 1.5em;
}
#frame
{
width: 1200px;
margin: 20px auto 10px;
}
#searchMap
{
margin: 0 0 10px;
text-align: center;
} # button
{
font-size: 9pt;
border: 1px solid #ccc;
} #txtArea{ }
#txtRight,#txtLeft{
float: left;
}
#result{
margin-left: 200px;
height: 200px;
}
#searchMap button:hover
{
background: #eef;
}
#vifix
{
text-align: center;
}
#vifix a
{
color: #f00;
text-decoration: none;
}
#vifix a:hover
{
color: #f96;
}
</style>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAe3YR_oZq7RQougOHlEQYxRTrT8HRiYVHGz6s-cexYhuHznMTnBQJ3hrfCSvSmQ_Fqr80B62kDy8djA&sensor=true"
type="text/javascript"></script>
<script type="text/javascript"> window.g = {};
window.$ = function (id) { return document.getElementById(id) };
window.onload = function () {
if (GBrowserIsCompatible()) {
g.map = new GMap2($("map"));
//加载google地图控件
g.map.addControl(new GLargeMapControl());
g.map.addControl(new GMapTypeControl());
g.map.addControl(new GScaleControl());
//实例化google客户端地理编码类(GClientGeocoder)
g.geocoder = new GClientGeocoder(); g.getCoordinates = function (address) {
g.geocoder.getLatLng(
address,
function (point) {
if (point) { var infoReasult =point.lat() +" "+ point.lng()+'\n'; $("txtResult").value+=infoReasult var infoArea=address+"\n"; $("txtArea").value+=infoArea; }
else { var unfound="没有查询到的点有：<br />";
$("unfound").innerHTML=unfound;
$("unfound").innerHTML+=address+"<br />";
}
}
)
} $("btn_go").onclick = function () {
$("info").innerHTML="";
$("txtResult").value="";
$("txtArea").value=""; var strSearch=$("txtSearch").value;
var addresses=strSearch.split('\n');
console.log(addresses); var strProvince=addresses[0].split('(')[0];
var strCity = new Array();
var strTown= new Array();
var strPrefix = new Array();
var k=0; for(var j=1;j<addresses.length&&addresses[j]!="";j++){
if(addresses[j].indexOf("市")>0){
strCity[k]=addresses[j].split('(')[0];
strTown[k]=addresses[j+1].split('(')[0];
strPrefix[k]=strProvince+strCity[k]+strTown[k]; for(var i=j+2;i<addresses.length&&addresses[i]!=""&&(addresses[i].indexOf("市")<0);i++){
//console.log(strPrefix[k]+addresses[i]);
g.getCoordinates(strPrefix[k]+addresses[i]); }
k=k+1;
}
}
} function adressSplit(adresses){
if(adresses.indexOf("市")>0){
if(adresses.indexOf("区")>0){
return adresses.split("区")[1];
}
else if(adresses.indexOf("县")>0){
return adresses.split("县")[1];
}
else if(adresses.indexOf("旗")>0){
return adresses.split("旗")[1];
}
else{
return adresses.split("市")[1];
}
}
else{
if(adresses.indexOf("区")>0){
return adresses.split("区")[1];
}
}
}
$("btn_split").onclick=function(){ var strSearch=$("txtArea").value;
console.log(sstrSearch);
$("txtSplit").value=""; var sstrSearch=strSearch.split("\n"); for(var i=0;i<sstrSearch.length;i++){
var infoArea=adressSplit(sstrSearch[i])+"\n";
console.log(infoArea);
//console.log(adressSplit(sstrSearch[i]));
$("txtSplit").value+=infoArea;
}
}
// $("btn_go").onclick();
}
else {
alert('不支持的浏览器');
}
}
window.onunload = function () {
GUnload();
}
</script> </head>
<body>
<div id="frame"> <div id="searchMap"> <p>输入查询的点（用回车分开）</p><button id="btn_go">获取坐标</button><br/>
<textarea id="txtSearch" rows="20" cols="40"/>第一行为省份：江苏省(349街道，836镇，
第二行为城市：南京市(81街道，19镇)
第三行为市区：玄武区(7街道)
第四行以下为街道
如：
江苏省(349街道，836镇，
南京市(81街道，19镇)
玄武区(7街道)
锁金村街道
红山街道 </textarea> <div id="info">
</div>
<div id="result">
<p>查询结果:</p>
<div id="txtLeft"> <textarea id="txtArea" rows="10" cols="35" value="" /></textarea></div>
<div id="txtRight"><textarea id="txtResult" rows="10" cols="40" value="" /></textarea></div>
<button id="btn_split">分割</button><br/> <div id="txtRight"><textarea id="txtSplit" rows="10" cols="40" value="" /></textarea></div>
<div id="unfound">
</div>
</div>
</div> <div id="map">
</div>
<div id="vifix">
Powered by <a href="http://code.google.com/apis/maps/" target="_blank">Google Map API</a>
/ Created by <a href="http://vifix.cn%22%3evifix.cn%3c/a>
</div>
</div>
</body>
</html>
Google Map API抓取地图坐标信息小程序的更多相关文章
- 如何使用Google Map API开发Android地图应用
两年前开发过的GoogleMap已经大变样,最近有项目要用到GoogleMap,重新来配置Android GoogleMap开发环境,还真是踩了不少坑. 一.下载Android SDK Manager ...
- Google Map API 使用总结
Google Map API (一):显示一个最基本的地图 1 实现一个地图:<head>中引用: <script type="text/javascript" ...
- Google Map API使用详解（一）——Google Map开发背景知识
一.谷歌地图主页 谷歌地图对应不同的地区都会有一些专门的主页,首次登陆时会显示这些地区.比如,香港的:http://maps.google.com.hk,台湾的:http://maps.google. ...
- Android中Google地图路径导航，使用mapfragment地图上画出线路(google map api v2)详解
在这篇里我们只聊怎么在android中google map api v2地图上画出路径导航,用mapfragment而不是mapview,至于怎么去申请key,manifest.xml中加入的权限,系 ...
- Google Map API v2 步步为营（一） ----- 初见地图
官方文档:https://developers.google.com/maps/documentation/android/start?hl=zh-CN 先谷歌后百度.使用google的api基本上按 ...
- 谷歌地图实现车辆轨迹移动播放(google map api)
开发技术:jquery,js baidu map api,json,ajax QQ1310651206 谷歌地图(google map api)实现车辆轨迹移动播放(google map api)
- 如何将经纬度利用Google Map API显示C# VS2005 Sample Code
原文 如何将经纬度利用Google Map API显示C# VS2005 Sample Code 日前写了一篇如何用GPS抓取目前所在,并回传至资料库储存,这篇将会利用这些回报的资料,将它显示在地图上 ...
- Google Map API V3开发（1）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发（3）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
随机推荐
- 如何解决Android开发中的【java.lang.unsatisfiedlinkerror findLibrary returned null.】 错误
将脉可寻的功能加入到自己的APP中时,需要在libs文件中添加.so文件和jar包 但是,加入.so文件后,仍然报错 在一番折腾之后,终于解决了,然而解决的方法很奇异- -. 在libs下新建一个ar ...
- Atcoder 2159 連結 / Connectivity(并查集+map乱搞)
問題文N 個の都市があり.K 本の道路と L 本の鉄道が都市の間に伸びています. i 番目の道路は pi 番目と qi 番目の都市を双方向に結び. i 番目の鉄道は ri 番目と si 番目の都市を双 ...
- Android-ContentProvider简单的增删改查
注意:在ContentProvider里面写对数据库增删改查的时候,千万不能 db.close(); cursor.close(); 等操作,不然其他应用访问不到数据,也没有必要写isOpen(); ...
- C#操作windows服务，安装、卸载、停止、启动
public class ServiceUtil { private string _ServiceName = string.Empty; private string _AppName = str ...
- SQL Server 2008R2 附件数据库问题记录
在Sql Server 2008 R2里附加数据库时弹出xxx.mdf拒绝访问的错误 详细错误信息如下: TITLE: Microsoft SQL Server Management Studio-- ...
- WPF MaterialDesignInXamlToolkit锁屏恢复后页面冻结的问题
在做WPF项目时,用到 MaterialDesignInXamlToolkit 开源项目.结果客户用的时候发现这个问题,锁屏后,界面不刷新. 如果不用MaterialDesign,测试后不会出现这个问 ...
- 动态生成select框内容
获取动态数据,显示在select选项中,当前select在jsp页面中 <select > <option>这里放选中或者当前的数据</option> <%f ...
- 牛客网提高组模拟赛第七场 T2 随机生成树
其实看懂题就很水啦qwq,就是求\(1-N\)的约数啦. 暴力求的话时间复杂度是\(O(NlogN)\)的,其实正解是枚举每个数的倍数......这样的时间复杂度是\(\frac{N}{1}+\fra ...
- Mysql 学习笔记09
---Mysql 的主从复制 replication 1 主从复制原理 至少有2台服务器,一台主服务器,一台从服务器,主服务器的所有改动,如 insert update delete 操作,都会同步 ...
- OCP 12c最新考试题库及答案（071-2）
2019-02-12 16:23:54 2.(4-7) choose the best answer:You need to display the first names of all cust ...