Google Map API 基本使用方法

javatoyou

浏览: 1072507 次
性别:
来自: 北京

最近访客更多访客>>

hhybq

altdon

gaojingsong

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2015)

社区版块

存档分类

由于工作需要，这两天在看GOOGLE MAP 的 API，需要在公司的网站上使用地图。今天把看过之后的一点使用方法，跟大家一起分享：

演示地址：http://www.yaohaixiao.com/code/googlemap%20sample/index.htm

程序代码

/*
==============================================================================
Google Map API
==============================================================================
方法说明：
1、GBrowserIsCompatible() -- 是否支持Google Map API
2、shopLat -- 酒店的经度坐标，
shopLng -- 酒店的纬度坐标
3、new GLatLng(shopLat, shopLng) -- 设置经纬度
4、map.setCenter(new GLatLng(shopLat, shopLng), 14) -- 设置地图默认的中心点经纬度
参数说明：
new GLatLng(shopLat, shopLng) -- 设置中心点的经纬度
14 -- 地图的默认缩放比例大小值，范围为1 - 18
5、new GMap2(document.getElementById("shopgooglemap")) -- 获取显示的地图容器
6、map.setMapType(G_NORMAL_MAP); -- 设置显示地图的类型
可选值：
1. G_NORMAL_MAP -- 默认地图样式
2. G_SATELLITE_MAP -- Google Earth 卫星地图
3. G_HYBRID_MAP -- 混合模式地图
7、new GIcon(G_DEFAULT_ICON) -- 设置标记样式
8、addControl() -- 给地图添加控件
常用的可选控件：
1. new GLargeMapControl() -- 大的地图缩放级别控件
2. new GOverviewMapControl() -- 地图缩略图控件
3. new GScaleControl() -- 比例尺控件
4. new GMapTypeControl() -- 地图类形选择控件
9、enableDoubleClickZoom() -- 双击（鼠标右键）放大/（鼠标左键）缩小地图比例
10、map.enableScrollWheelZoom() -- 滚动滑轮方法（向前）放大/（向后）缩小地图比例
11、enableContinuousZoom() -- 允许连贯改变地图比例
12、createMarker(latlng) -- 自定义方法：
方法说明：
new GMarker(latlng) -- 在地图中设置标签，参数latlng -- 标签的坐标
Event.addListener(marker,event,function) -- 给标签设置事件
参数说明：
marker -- 标签对象,
event -- 事件名称
function -- 时间的处理函数
openInfoWindowHtml(latlng, myHtml) -- 将信息框添加到标签上
参数说明：
latlng -- 标签坐标,
myHtml -- 提示信息的HTML字符串
===============================================================================
获取地图中心坐标：javascript:void(prompt('中心坐标',gApplication.getMap().getCenter()));
===============================================================================
*/

function initMap(){
if(GBrowserIsCompatible()){
var shopLat=message[0][0];
var shopLng=message[0][1];

var map = new GMap2(document.getElementById("shopgooglemap"));
map.setCenter(new GLatLng(shopLat, shopLng), 14);

function createMarker(latlng){
var marker = new GMarker(latlng);
marker.value=0;

GEvent.addListener(marker,"click", function(){
var myHtml = "<span id=/"shopInfo/">";
myHtml += "<h2>" + message[1][0] + "</h2><br />"
for(var j=1;j<message[1].length;j++){
myHtml += message[1][j]+"<br />";
}
myHtml +="</span>";
map.openInfoWindowHtml(latlng, myHtml);
}
);
return marker;
}

var point = new GLatLng(shopLat,shopLng);
map.addOverlay(createMarker(point));

map.enableDoubleClickZoom();
map.enableScrollWheelZoom();
map.enableContinuousZoom();

map.addControl(new GLargeMapControl())
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
}
else{
alert("对不起，您的浏览器不支持创建地图！")
}
}

使用起来超简单，google 的牛人们为我们把一切都设计好了。看看页面代码：

程序代码

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>金钱豹利苑酒家订餐地图---订餐小秘书</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/map.css" rel="stylesheet" type="text/css" meida="all" />

<script language="javascript" type="text/javascript" src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAkXrmByB7rkDtXDH8HNv_WRQzb_-fHHgqrp5CI71PBMVJnXAVnhRuj7Vkn4c84_d2ZthtPuycFDkAvg"></script>
<script language="javascript" type="text/javascript">

</script>
<script language="javascript" type="text/javascript" src="js/fgMap.js"></script>
</head>
<body onunload="GUnload()">
<div id="header">
<h1><a href="http://www.57575777.com/" target="_blank">订餐小秘书</a></h1>
<ul>
<li id="nav-first" ><a href="/Default.aspx" target="_blank">首页</a></li>
<li><a href="/members/MemberDefault.aspx" target="_blank">会员登录/积分查询</a></li>
<li><a href="/CommonHtml/57jf.aspx" target="_blank">积分兑奖</a></li>
<li><a href="/members/MemberDefault.aspx?type=2" target="_blank">餐饮经理人专区</a></li>
<li><a href="/members/MemberAction.aspx" target="_blank">免费注册</a></li>
<li><a href="/0/0/SH/1/0/0/1/0/0/1/SearchRslt.aspx" target="_blank">折扣餐厅</a></li>
<li><a href="/ResManage/resmanage.aspx" target="_blank">自助管理</a></li>
<li id="nav-last"><a href="/CommonHtml/Market.aspx" target="_blank">市场活动</a></li>
</ul>
</div>
<h1>金钱豹利苑酒家订餐地图</h1>
<div id="shopgooglemap"></div>
<script language="javascript" type="text/javascript">

</script>
<div id="footer">
<p>
上海最大、最全的订餐平台。为您顾问式搜罗全上海所有餐厅、饭店和美食。预订餐厅、饭店全程服务，享受VIP折扣，获得惊喜积分。提供优质实惠的婚宴、团宴服务。
</p>
<p>
<a href="/CommonHtml/friendtxt.aspx">网友来稿</a> | <a href="/CommonHtml/link.aspx">友情链接</a> | <a href="/CommonHtml/AboutWebSite.aspx">关于本站</a> | <a href="/CommonHtml/Job.aspx">诚聘英才</a> | <a href="#1">合作入口</a> | <a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.57575777.com/');">设置首页</a> | <a href="#" onclick="window.external.addFavorite('http://www.57575777.com/','订餐小秘书');">加入收藏夹</a>
</p>
<p>
Copyright © 2007 上海订餐中心 www.57575777.com, All Right Reserved.沪ICP备05062273号
</p>
</div>
</body>
</html>

分享到：