由于工作需要,这两天在看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" />
<!--API KEY FOR www.fg114.com(ABQIAAAAkXrmByB7rkDtXDH8HNv_WRQzb_-fHHgqrp5CI71PBMVJnXAVnhRuj7Vkn4c84_d2ZthtPuycFDkAvg)-->
<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">
<!--
// Hotel brief infomation message
var
message =[["31.19095130514533","121.38208150863647"],
["金钱豹利苑酒家","菜系:粤菜 广东菜 燕鲍翅","人均消费:250-500元","地址:
延安西路3162号金钱豹大酒店2楼近程家桥路","营业时间: 11:00-14:30,17:00-22:30
","订位电话:<strong>021-57,57,5777!我吃,我吃,我吃吃吃! </strong>"]];
//-->
</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">
<!--
initMap();
//-->
</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>
分享到:
相关推荐
Google Map API 使用示例
优秀的Google Map API基本源码,值得学习!
详尽的介绍了google map api 并简单的举了几个例子,能帮助你了解Google map 编程
谷歌地图Google Map API中文开发文档 V3
google map api 实现自定义mark和其移动
费了半天才找到的源代码,很好用的,如果想学习google map api二次开发,他会提供很好帮助!
google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档
GoogleMap api 中文 GoogleMap api 中文 GoogleMap api 中文 GoogleMap api 中文 GoogleMap api 中文
写了一些GOOGLE MAP应用,大家分享
google map api 调用的实例,
这个swc是googlemap对flash的api,他并不适用于flex,关于flex,有自己的swc哦
谷歌地图api v3 学习文档,资料查询, 基础学习。
最新的Google Map Api 帮助文档 免费下载地址: http://www.hkmci.com
Android google map API例子
包含了利用Google Map API进行二次开发的很多实例,为刚开始接触Google Map API进行二次开发的读者提供了一条捷径。
Google Map api V3 (3.9.12)的离线开发包
基于googlemap api 的gps终端和用户管理系统基于googlemap api 的gps终端和用户管理系统基于googlemap api 的gps终端和用户管理系统基于googlemap api 的gps终端和用户管理系统基于googlemap api 的gps终端和用户...
介绍Google Map Api的文档,其中对Google Map编程中使用的部分API接口进行了说明。
使用google地图的反向地址解析功能,提供一个经纬度得到对应地址,或者给出模糊地址,得到经纬度,放在java后台代码中处理,这个使用的是Google的地理编码服务。一般而言数据量不大的情况使用是不限制的。按照Google...
基于Google map 的API,带搜索功能