快捷搜索:

Google 地图基本接口(一)

前不久钻研了一下51的舆图接口,感到还不错。然则在我们的夺目中想到电子舆图,首先想到的是Google吧,Google地球应该说没有那个搞法度榜样的没有据说过,Google的技巧令我们称叹。近来忙公司的事也良久没有钻研其他的器械了,本日起抉择开始钻研Google 舆图接口。

1. 参考文档

Google Maps API2 文档地址: http://www.codechina.org/doc/google/gmapapi/#Control_Modification

本日粗略的看了一下,彷佛Google map 的接口比51的要难。先不说这些丧气的话,照样谈谈Google map吧

2. 接口根基

首先照样看看Google 舆图的示例吧,这样总能给人直不雅的感到,包括这种效果,能够吸惹人从而忘却艰苦。

上面这张图是显示的上海市的舆图,感到照样不错的。接下来我们就以这张图的效果看代码。

1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2 html>

3head>

4meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

5title>Google 舆图-根基常识title>

6style type="text/css">

7.body{

8text-align:center;

9}

10.map{

11width:500px;

12height:330px;

13border-style:solid;

14border-width:1px;

15}

16style>

17

18地址(http://maps.google.com/maps?file=api&v=2)是在您的页面放置Google舆图必要的所有的代码的JavaScript文件。

19您的页面必须包孕指向这个地址的script标记

20-->

21script src="http://maps.google.com/maps?file=api&v=2" type="text/javascript">

22script>

23script language="JavaScript" type="text/javascript">

24/**

25* 初始化舆图 应用GMap2工具可以创建舆图并显示在googlemap上面

26* setCenter()可以设置舆图的中间位置和放缩比例

27* GLatLng() 是基于地舆信息也便是经纬度的,舆图的居中位置,标记的位置等等都是基于GLatLng的

28* GPoint的x,y是像素,是相对付屏幕坐标的

29*/

30function load(){

31var map = new GMap2(document.getElementById("googlemap"));

32map.setCenter(new GLatLng(31.11,121.29), 10);

33}

34script>

35head>

36body class="body" onload="load()">

37div id="googlemap" class="map">

38

39div>

40body>

41 html>

42

您可能还会对下面的文章感兴趣: