JavaScript
搜索
分类

Google Map API 基本使用方法

作者：海啸 来源：海啸的地盘 时间：2008-06-15 06:51:00　

由于工作需要，这两天在看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 &copy; 2007 上海订餐中心 www.57575777.com, All Right Reserved.    沪ICP备05062273号
</p>    
</div>
</body>
</html>


 

标签：map,api,方法,google
0
投稿

猜你喜欢

  • MySQL优化之数据表的处理

    2008-12-22 14:45:00

  • 如何把ASP源代码编写成DLL组件

    2007-10-19 13:49:00

  • Windows下ORACLE 10g完全卸载的方法分析

    2012-07-11 16:09:26

  • asp图片加水印的功能代码

    2011-02-05 11:02:00

  • PHP桥接模式Bridge Pattern的优点与实现过程

    2023-05-25 06:53:44

  • asp经典入门教程 在ASP中使用SQL 语句

    2013-06-01 20:23:21

  • MySQL中数据表操作详解

    2008-12-29 13:50:00

  • asp如何直接调用后台存储过程？

    2010-06-28 18:27:00

  • 类似google的ASP分页代码[测试通过]

    2009-03-13 12:43:00

  • AJAX请求类下载

    2007-08-23 08:33:00

  • 成功的用户界面的八个特性[译]

    2009-04-20 20:36:00

  • php ZipArchive解压缩实现后台管理升级问题详解

    2023-05-25 11:58:10

  • JavaScript 关于引用那点事

    2009-11-28 18:44:00

  • 谷歌历年母亲节Logo一览

    2009-05-11 12:17:00

  • Javascript中Eval函数的使用

    2008-12-04 16:41:00

  • 如何编写一个高效的国税系统通讯录数据库？

    2009-11-07 18:53:00

  • 如何使用表单发送电子邮件？

    2010-05-16 15:13:00

  • 一组常用的弹出窗口用法总结

    2007-10-08 13:04:00

  • 艺术和设计之间的差别

    2010-11-17 19:28:00

  • 用数据库生成不重复的流水号

    2007-10-06 22:49:00
    • asp之家 网络编程 m.aspxhome.com