您的位置：首页 > 编程语言 > Go语言

Google Maps API用法教程

2009-10-28 11:09 876 查看

原文链接：http://coolshell.cn/?p=1561（酷壳）

在过去的一年中，在线地图的发展是相当巨大，我们可以看到在线地图的极有价值的信息和其能力。这其中，最有名气的自然是GoogleMaps。.GoogleMaps由一个相当强大的开发引擎并也有一个很大的社区提示支持。

Google允许各种webmasters通过GoogleMapsAPI来增加或自定义他们站点特定的地图，你可能从这里取得GoogleAPIkey。一个地图APIkey只对一个“目录”或域有效。key绑定了你的域名，你要在网站上放地图，需要有对应的key，否则拒绝读取地图数据，在本地测试可以不用key。当然，你可以申请多个APIkey。

创建一个简单的地图

在你的站点上引入GoogleMaps是一件很简单的事情，你只需要加入：



引入Google的JavaScript文件

设置JavaScript一些参数

一个你需要显示地图的HTMLlayer

Google的Javascript文件引入:

1.
<script

2.
charset=
"UTF-8"

3.
src=http:
//maps.google.com/maps?file=api&v=2&hl=en&oe=utf-8&key=API_KEY

4.
type=
"text/javascript"
>

5.
</script>


注意：我们可以改变语言，比如说，把“hl=en”改成中文“hl=zh-CN”。我们还得要把“API_KEY”改成我们向Google申请来的那个。

说明:使用UTF-8编码会更好些。

设置地图参数:

这是你可定制有个性化的GoogleMaps的地方。我们可以增加一些参数来改变地图的样式。例如，我们可以设置地图的载入和显示的坐标。下面是相关的代码：

1.
function
initialize(){

2.
if
(GBrowserIsCompatible()){

3.
var
map=
new
GMap2(document.getElementById(
"map_canvas"
));

4.
map.setCenter(
new
GLatLng(37.97918,23.71665),13);

5.
map.setUIToDefault();

6.
}

7.
}


请注意上面高亮的那一条语句，第一个是纬度坐标和第二个是经度坐标，“13”表示地图缩放的程度，这个值可以取1到17。

要知道所在地点的纬度和经度，你可以使用这个工具，这个工具很容易使用，只需要把地图移到你想要的区域，然后，把鼠标放在中心就可以了。

地图标记
你可以在地图上放上一个标记来标出一个特定的位置，下面是一个示例代码。

1.
var
point=
new
GLatLng(37.97110,23.72601);

2.
map.addOverlay(
new
GMarker(point));


于是，我们整个代码看起来是下面这个样子：

01.
function
initialize(){

02.
if
(GBrowserIsCompatible()){

03.
var
map=
new
GMap2(document.getElementById(
"map_canvas"
));

04.
map.setCenter(
new
GLatLng(37.97918,23.71665),13);

05.
var
point=
new
GLatLng(37.97110,23.72601);

06.
map.addOverlay(
new
GMarker(point));

07.
map.setUIToDefault();

08.
}

09.
}


上面的示例把我们的地图的中心放在了希腊雅典，标记了雅典卫城。

气球提示

气球提示一个很不错的界面，他可以用于放置一些小提示或或是一些信息。例如，下面的代码将放置一个在雅典卫城山上放一个气球提示来显示一些信息：

01.
function
initialize(){

02.
if
(GBrowserIsCompatible()){

03.
var
map=
new
GMap2(document.getElementById(
"map_canvas"
));

04.
map.setCenter(
new
GLatLng(37.97110,23.72601),13);

05.
var
html=
"Parthenon帕台农神庙,地址:AcropolisHill"
;

06.
map.openInfoWindow(map.getCenter(),

07.
document.createTextNode(html));

08.
map.setUIToDefault();

09.
}

10.
}


活动标记
我们可以合并一些标记和气球提示来创建一个活动标记，这样一来，我们可以达到这样的效果——当用户点击某个标记的时候才会显示提示。代码如下所示：

01.
function
initialize(){

02.
if
(GBrowserIsCompatible()){

03.
var
map=
new
GMap2(document.getElementById(
"map_canvas"
));

04.
map.setCenter(
new
GLatLng(37.97918,23.71665),13);

05.
var
baseIcon=
new
GIcon(G_DEFAULT_ICON);

06.
baseIcon.shadow=
"http://www.google.com/mapfiles/shadow50.png"
;

07.
baseIcon.iconSize=
new
GSize(20,34);

08.
baseIcon.shadowSize=
new
GSize(37,34);

09.
baseIcon.iconAnchor=
new
GPoint(9,34);

10.
baseIcon.infoWindowAnchor=
new
GPoint(9,2);

11.

12.
function
createMarker(point,index){

13.
var
redIcon=
new
GIcon(baseIcon);

14.
redIcon.image=
"http://www.google.com/mapfiles/marker.png"
;

15.
markerOptions={icon:redIcon};

16.
var
marker=
new
GMarker(point,markerOptions);

17.
GEvent.addListener(marker,
"click"
,
function
(){

18.
marker.openInfoWindowHtml(
"Parthenon,Address:AcropolisHill"
);

19.
});

20.
return
marker;

21.
}

22.

23.
var
latlng=
new
GLatLng(37.97110,23.72601);

24.
map.addOverlay(createMarker(latlng));

25.
}

26.
}


让我来梳理一下上面的代码。下面的部分是在标记下增加一个阴影：

1.
var
baseIcon=
new
GIcon(G_DEFAULT_ICON);

2.
baseIcon.shadow=“
http://www.google.com/mapfiles/shadow50.png”
;

3.
baseIcon.iconSize=
new
GSize(20,34);

4.
baseIcon.shadowSize=
new
GSize(37,34);

5.
baseIcon.iconAnchor=
new
GPoint(9,34);

6.
baseIcon.infoWindowAnchor=
new
GPoint(9,2);


标记的Action是在这里设置的：

01.
function
createMarker(point,index){

02.
var
redIcon=
new
GIcon(baseIcon);

03.
redIcon.image=
"http://www.google.com/mapfiles/marker.png"
;

04.
markerOptions={icon:redIcon};

05.
var
marker=
new
GMarker(point,markerOptions);

06.
GEvent.addListener(marker,
"click"
,
function
(){

07.
marker.openInfoWindowHtml(
"Parthenon,Address:AcropolisHill"
);

08.
});

09.
return
marker;

10.
}


这里是我们的标记的坐标：

1.
var
latlng=
new
GLatLng(37.97110,23.72601);

2.
map.addOverlay(createMarker(latlng));


载入地图
我们可以通过两种方法载入地图。我们可以让地图在整网页载入时载入（通过使用body的load事件），也可以把载入过程赋给其它事件。下面的两个方法是我们需要注意的：

initialize()载入地图

GUnload()卸载地图以释放内存

我们当然还需要使用HTML的DIV标签来指定一个ID，这样才能被JavaScript使用，在我们的示例中，我们使用“map_canvas”。我们也能使用CSS来渲染这个DIV层。

定制地图
你可以使用自定义的标记和阴影。有两个工具可以帮助你创建这些图标——地图标记和阴影。你也可以使用HTML和CSS来定义气球提示。

加入多个标记并分组
我们可以标记多个地点，并可以把它们根据我们的需要分组。这样一来，我们可以通过不同的标记图标来显示地点的不同属性，比如：酒店，车站等。要做到这样，我们只需要使用一个XML文件，一个简单的XML文件如下所示：

01.
<
markers
>

02.
<
marker

03.
name
=
"标题"

04.
label
=
"这是一个标签"

05.
desc
=
"气球提示的描述"

06.
lat
=
"37.97167"
lng
=
"23.72581"

07.
type
=
"标签的种类，如Bridge"

08.
address
=
"地址信息"

09.
icona
=
"图标"

10.
/>

11.
</
markers
>


你可以在这个XML文件中加入多个地点信息。有一件事你需要小心的是，当出现一一些特定字符时（比如单引号，双引号，“#@$<>”等），你需要使用HTML的转义。

使用这XML的脚本如下：

查看源代码

打印帮助

1.
<scriptsrc=
"http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/release/src/labeledmarker.js"
type=
"text/javascript"
></script>


当然，你需要设置一些参数：

01.
var
iconRed=
new
GIcon();

02.
iconRed.image=
'../img/marker-red.png'
;

03.
iconRed.shadow=
''
;

04.
iconRed.iconSize=
new
GSize(32,32);

05.
iconRed.shadowSize=
new
GSize(22,20);

06.
iconRed.iconAnchor=
new
GPoint(16,16);

07.
iconRed.infoWindowAnchor=
new
GPoint(5,1);

08.
var
customIcons=[];

09.

10.
customIcons[
"ancient"
]=iconRed;

11.
var
markerGroups={
"ancient"
:[]};


上面，我们给customIcons的“ancient”属性设置成了iconRed，于是我们应该在我们的XML文件中使用类型(ancient)，如果我们把这个XML文件命名为：markers.xml，那么，我们的代码如下：

01.
GDownloadUrl(
"markers.xml"
,
function
(data){
//WetellGoogleMapstoloadourfile

02.
var
xml=GXml.parse(data);

03.
var
markers=xml.documentElement.getElementsByTagName(
"marker"
);
//andreadmarkers

04.
for
(
var
i=0;i<markers.length;i++){

05.
var
name=markers[i].getAttribute(
"name"
);
//Fromheredownweassignvariables.

06.
var
label=markers[i].getAttribute(
"label"
);

07.
var
desc=markers[i].getAttribute(
"desc"
);

08.
var
address=markers[i].getAttribute(
"address"
);

09.
var
type=markers[i].getAttribute(
"type"
);

10.
var
icona=markers[i].getAttribute(
"icona"
);

11.
var
point=
new
GlatLng(parseFloat(markers[i].getAttribute(
"lat"
)),
//andwesetthelat-long

12.
parseFloat(markers[i].getAttribute(
"lng"
)));

13.
var
marker=createMarker(point,name,label,desc,address,type,icona);

14.
map.addOverlay(marker);

15.
}

16.
});

17.
}

18.
}

19.

20.
function
createMarker(point,name,label,desc,address,type,icona){

21.
var
marker=
new
LabeledMarker(point,{icon:customIcons[type],labelText:label,labelOffset:
new
GSize(-6,-8)})

22.
};


要分组标记，你需要下面的代码：

1.
markerGroups[type].push(marker);

2.
var
html=
"<imgsrc="
+icona+
"height=150border=0/><br><br><span><b>"
+name+
"</b><br/>"
+

3.
desc+
"<br/><b>Address:</b>"
+address+
"<br/><br/><span>"
;

4.
GEvent.addListener(marker,
'click'
,
function
(){

5.
marker.openInfoWindowHtml(html);

6.
});

7.
return
marker;

8.
}


要使用不同的图标，你可以使用相同的方法。

01.
var
iconRed=
new
GIcon();

02.
iconRed.image=
'../img/marker-red.png'
;

03.
iconRed.shadow=
''
;

04.
iconRed.iconSize=
new
GSize(32,32);

05.
iconRed.shadowSize=
new
GSize(22,20);

06.
iconRed.iconAnchor=
new
GPoint(16,16);

07.
iconRed.infoWindowAnchor=
new
GPoint(5,1);

08.

09.
var
iconGreen=
new
GIcon();

10.
iconGreen.image=
'../img/marker-green.png'
;

11.
iconGreen.shadow=
''
;

12.
iconGreen.iconSize=
new
GSize(32,32);

13.
iconGreen.shadowSize=
new
GSize(22,20);

14.
iconGreen.iconAnchor=
new
GPoint(16,16);

15.
iconGreen.infoWindowAnchor=
new
GPoint(5,1);

16.

17.
var
iconBrown=
new
GIcon();

18.
iconBrown.image=
'../img/marker-brown.png'
;

19.
iconBrown.shadow=
''
;

20.
iconBrown.iconSize=
new
GSize(32,32);

21.
iconBrown.shadowSize=
new
GSize(22,20);

22.
iconBrown.iconAnchor=
new
GPoint(16,16);

23.
iconBrown.infoWindowAnchor=
new
GPoint(5,1);

24.

25.
var
customIcons=[];

26.

27.
customIcons[
"hotel"
]=iconRed;

28.
customIcons[
"bridge"
]=iconGreen;

29.
customIcons[
"hill"
]=iconBrown;

30.
var
markerGroups={
"hotel"
:[],
"bridge"
:[],
"hill"
:[]};


所以，如果我们在XML文件中设置了不同的种类，如：hotel，bridge和hill，我们也应该需要不同的颜色和图标。

过滤显示标记
我们还可以让我们的标记更友好一些。我们可以让用户决定是否显示标记，这样的话，地图上的标记就不会太多，也会根据用户的需求来显示相当的标记。我们可以使用几个按钮，复选框，或是链接来完成这个事情。要做到这个事，你需要在“map.addMapType(G_SATELLITE_3D_MAP);”后面加入下面的代码：

1.
document.getElementById(
"hotelCheckbox"
).checked=
true
;

2.
document.getElementById(
"bridgeCheckbox"
).checked=
true
;

3.
document.getElementById(
"hillCheckbox"
).checked=
true
;

4.
document.getElementById(
"labelsCheckbox"
).checked=
true
;


然后再加入下面的这些JavaScript的代码：

01.
function
toggleGroup(type){

02.
for
(
var
i=0;i<markerGroups[type].length;i++){

03.
var
marker=markerGroups[type][i];

04.
if
(marker.isHidden()){

05.
marker.show();

06.
}
else
{

07.
marker.hide();

08.
}

09.
}

10.
}

11.

12.
function
toggleLabels(){

13.
var
showLabels=document.getElementById(
"labelsCheckbox"
).checked;

14.
for
(groupName
in
markerGroups){

15.
for
(
var
i=0;i<markerGroups[groupName].length;i++){

16.
var
marker=markerGroups[groupName][i];

17.
marker.setLabelVisibility(showLabels);

18.
}

19.
}

20.
}

21.

22.
function
hideAll(){

23.
var
boxes=document.getElementsByName(
"mark"
);

24.
for
(
var
i=0;i<boxes.length;i++){

25.
if
(boxes[i].checked){

26.
boxes[i].checked=
false
;

27.
switchLayer(
false
,layers[i].obj);

28.
chosen.push(i);

29.
}

30.
}

31.
}

32.

33.
function
checkChecked(){

34.
var
boxes=document.getElementsByName(
"mark"
);

35.
for
(
var
i=0;i<boxes.length;i++){

36.
if
(boxes[i].checked)
return
true
;

37.
}

38.
return
false
;

39.
}


最后一件事是加如几个checkbox：

1.
<
input
type
=
"hidden"
id
=
"labelsCheckbox"
onclick
=
"toggleLabels()"
checked=”checked”/>

2.
<
label
for=”hotelCheckbox”>Hotels</
label
><
input
type
=
"checkbox"
id
=
"hotelCheckbox"
onclick
=
"toggleGroup('hotel')"
checked=”checked”/>

3.
<
label
for=”bridgeCheckbox”>Bridges</
label
><
input
type
=
"checkbox"
id
=
"bridgeCheckbox"
onclick
=
"toggleGroup('bridge')"
checked=”checked”/>


我们GoogleMaps就绪了，这篇文章讲述了GoogleMapAPI中你应该知道的。希望这篇文章对你有帮助。

文章：来源
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航