利用Google Map显示指定位置地理位置

最新推荐文章于 2019-06-28 18:51:01 发布
最新推荐文章于 2019-06-28 18:51:01 发布
阅读量7.2k 收藏 1
点赞数
文章标签： google javascript api xhtml function html

首先,到google申请Google Maps API,申请后会给你一个key还有一段代码
http://code.google.com/apis/maps/index.html
要注意的是一个 API Key 只能对一个地址有效


申请后的key如下:

代码: [Copy to clipboard]

ABQIAAAAM5BY-rSwAwjpnCo7EkRoehTbZX4g8VFP3M2bjMNtSqa5T9xH-BQlEjHNx26rxnbv6ZGnzQ6CP-Oiqw



示范代码:

代码: [Copy to clipboard]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src=" http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAM5BY-rSwAwjpnCo7EkRoehTbZX4g8VFP3M2bjMNtSqa5T9xH-BQlEjHNx26rxnbv6ZGnzQ6CP-Oiqw"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body οnlοad="load()" οnunlοad="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>




这样就可以了,但是这样的话只能显示默认的地方
如果要显示指定地方的话,还需要把坐标传递进去
这样一来,就有一个问题了:如果我只是知道他们的中文地址的话,如何转换成Google能够识别的坐标呢?

找了半天,终于看到有人做了一个差不多的,主要是利用了51ditu的api来做下转换

于是去了51ditu,看了下demo,感觉还是比较简单的

51ditu Maps API 类参考文档: http://api.51ditu.com/docs/mapsapi/reference.html
51ditu Maps API 范例文档: http://api.51ditu.com/docs/mapsapi/examples.html


试了一下,发现只要把
<script language="javascript" src=http://api.51ditu.com/js/maps.js></script>
加载进去,然后传递中文地区的值给51ditu API 就可以了

于是大概修改了下:

代码: [Copy to clipboard]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Bar Map</title>
<script language="javascript" src=http://api.51ditu.com/js/maps.js></script>
<script src=" http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAM5BY-rSwAwjpnCo7EkRoehTbZX4g8VFP3M2bjMNtSqa5T9xH-BQlEjHNx26rxnbv6ZGnzQ6CP-Oiqw"
type="text/javascript"></script>

<script type="text/javascript">

var area;
area='beijing';
var bw=LTPlaceList.getDefault().getPoint(area).getLatitude()/100000;
var bj=LTPlaceList.getDefault().getPoint(area).getLongitude()/100000;

//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(bw, bj), 13);
}
}
//]]>


</script>
</head>
<body οnlοad="load()" οnunlοad="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>



瓦咔咔,这样就可以显示到北京地区的地图,把 area="beijing"换成中文的"北京"也是一样

到这里,基本就算是解决了

如果需要从另外一个页面来调用这个程序的话,比如一个商城,里面有很多商店,这样就可以通过Google api 来显示商店的问题了,一目了然

可以通过get方式来传递值进来,然后用js来接受
稍微试了下,大概方式如下:

代码: [Copy to clipboard]

<script type="text/javascript">
var thisURL = document.location.search
var Request = new Object();
var area;
if(thisURL.indexOf("?")!=-1)
{
var str = thisURL.substr(1)
strs = str.split("&");
for(var i=0;i<strs.length;i++)
{
Request[strs .split("=")[0]]=unescape(strs.split("=")[1]);
}
area=Request['area'];
}
if(area=='') area='beijing';
var bw=LTPlaceList.getDefault().getPoint(area).getLatitude()/100000;
var bj=LTPlaceList.getDefault().getPoint(area).getLongitude()/100000;

//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(bw, bj), 13);
}
}
//]]>


</script>


'通过js来分析地址栏,然后获取指定的值,如同asp或者php接受变量一样

这样 比如测试文件保存为map.html的
只要访问" map.html?area=潮州 "就可以看到潮州的地图了

还有一个要说明的是
Google map 的中英文版本的数据,貌似是不大一样的
中文版的api是:
<script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAM5BY-rSwAwjpnCo7EkRoehTbZX4g8VFP3M2bjMNtSqa5T9xH-BQlEjHNx26rxnbv6ZGnzQ6CP-Oiqw" type="text/javascript"></script>

janee81930
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Google Map开发系列（五）——怎样在你的网页里嵌入地图
Taskcnjia的专栏
03-02 8946
Normal 0 0 2 false false false MicrosoftInternetExplorer4 <!-- /* Style Defini
如何将谷歌地图嵌入网页并默认显示指定地理位置
07-01
如何将谷歌地图嵌入网页并默认显示指定地理位置
如何网页中嵌入谷歌地图
zuoququer的博客
08-03 2570
方法一 ： 打开谷歌地图————左上角菜单————分享或嵌入地图————嵌入地图————默认“中”改为自定义尺寸————设置尺寸后复制代码到网页即可，可调成width：响应式100%或其他等（此种方法叫简单，对于显示中文地图，查资料说谷歌官网会根据地区自动换成当地语言，没必要非要加入代码改为英文，有待考察，我也不确定） 方法二 ：利用谷歌账号  ：
Android开发笔记Google地图定位与路线显示
tianshengwo123的专栏
06-23 1426
当你的应用需要加入Google地图，并且需要根据两点坐标规划路线时，就需要在应用中加入Google地图，调用指定的api获取路线数据，再把数据显示出来。 1.加载google地图，实例化一个地图视图对象，地图操作管理对象，地图图层对象等。图层对象可以用于在指定坐标位置显示用户自定义的图标，以及用于显示路径。 LayoutInflater inflater = getLayoutInfl
地图权限控制——只显示特定用户权限的地图区域，遮罩其他区域
chaoyang89111的博客
04-23 2917
这篇博客对该功能进行了美化。 项目中有时候需要突出显示（或者只显示）需要的区域，遮罩其他不需要的区域，这就是经常遇到的地图权限问题，如下图所示： 只用openlayers是无法解决的，需要配合H5中的canvas来实现。 var bianjieSource=new ol.source.Vector({ features: (new ol.format.G...
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
09-28
获取到位置信息后，我们可以结合Google Maps API将位置显示在地图上。首先，要在HTML中引入Google Maps API的JavaScript库： ```html <script type="text/javascript" src="http://maps.google....
google-map.rar_google map
最新发布
09-19
这个名为"google-map.rar"的压缩包文件似乎包含了一些关于如何利用Google Maps API进行开发的小示例。下面我们将深入探讨Google Maps API以及这些示例可能涵盖的知识点。 首先，"helloworld程序"是许多编程教程的...
Google Map Api和GOOGLE Search Api整合实现代码
09-05
在本文中，我们将深入探讨如何将Google Map API与Google Search API进行整合，以便在地图上显示基于地理位置的搜索结果。这个整合实现的核心是一个名为`KMapSearch`的JavaScript类，它利用面向对象的设计来简化这一...
GoogleMap瓦片地图下载器
05-02
GoogleMap瓦片地图下载器能够下载这些瓦片，将它们拼接成完整的地图图像，适用于需要离线地图数据的场景，如地理分析、地图应用开发或研究项目。 下载器的工作原理涉及到网络请求和图像处理。首先，它通过特定的URL...
Weather-app:显示指定位置的条件。 编码在node.js中
05-09
由于天气信息通常依赖于地理位置，本项目可能使用了Geocode API将用户的地址转换为经纬度坐标。这一步至关重要，因为大部分天气API都要求以经纬度作为输入参数。常见的Geocode API有Google Maps Geocoding API或Open...
android地图定位到指定坐标
08-05
实现了百度地图的显示，而且可以手动定位到指定坐标
Google Map开发系列（八）——使用GMapOptions定制你的谷歌地图
Taskcnjia的专栏
03-02 2706
Normal 0 0 2 false false false MicrosoftInternetExplorer4 <object classid="clsid
谷歌地图开发：地理编码和反地理编码
热门推荐
程序人生，算法世界
02-10 1万+
谷歌地图Geocoding说明：内容主要来自谷歌官网的文档，谷歌地图android api地理和反地理编码反应迟钝内容有时不准确，这里使用的googlemap的webapi接口。嗯，需要vpn这个不多做说明了... 什么是地理编码？ 地理编码是将地址（如“1600 Amphitheatre Parkway, Mountain View, CA”）转换为地理坐标（如纬度 37.42302
android 跳转第三方地图（百度，高德，谷歌）
再见孙悟空的专栏
09-13 1万+
现在我们在做app的时候除了功能性以外，还会考虑开发时间和开发成本 ，所以很多功能我们可以技巧性的避开自己开发，直接跳转到三方软件。 比如 地图的导航功能，我们完全可以不必集成三方的sdk， 这样做的好处有几点 1.减少自身开发成本 2.减少项目及app大小 3.功能性自己做不如三方app的全面 但是同时也有弊端 就是一些客户倘若没有安装任何一款三方的地图软件 这样的话可
leaflet集成google map搜索、支持显示菜单功能（支持回车选中第一项，自定义菜单）
smk108的博客
06-28 2831
我之前参与过一个与地图展示相关的项目，是在react项目中使用leaflet实现的，当时项目中集成了地形、卫星、交通等图层，加入了一些停车场、交通信号灯等数据信息。当时项目中使用的是react-leaflet，但是我们知道leaflet有很多plugins可以使用，但是这些插件很多没有对应的react版本，有些插件也不满足我们的需求，所以在项目中修改了一些插件。 Leaflet-gplaces-...
在百度地图或谷歌地图给中国各省着色并高亮显示
diaoshuo0506的博客
07-17 1960
最近有朋友需要在百度地图中给各省按不同颜色显示，先上效果图： 原理就是获取各省的边界坐标,然后在地图上面用不颜色的覆盖物Polygon，百度地图和谷歌地图都有同样的Polygon类。 百度地图的API相关Polygon文档在这里：http://dev.baidu.com/wiki/map/index.php?title=Class:%E8%A6%86%E7%9B%96%E7%89...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值