[原]利用Google Map显示指定位置地理位置--疯子哥德--韩师笔架山信息平台

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

2008-01-05 晴

前些日子做的一个应用,要求在页面某个位置显示指定地点的地图
于是想到了google map

首先,到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&v=2&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 onload="load()" onunload="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&v=2&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 onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

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

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

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

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

代码: [Copy to clipboard]

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

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

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

英文版的是:
中文版的api是:
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAM5BY-rSwAwjpnCo7EkRoehTbZX4g8VFP3M2bjMNtSqa5T9xH-BQlEjHNx26rxnbv6ZGnzQ6CP-Oiqw" type="text/javascript"></script>

也就是maps和ditu的不同,感觉如果传递进去的是中国的地名的话,用ditu显示的数据会比较多,用maps的会比较少.由于我不大清楚外国地址,所以没做什么测试.

[全部]

# posted by hacder @ 2008-01-05 08:18:24 评论(0)