位置：首页>> 网络编程>> JavaScript>> Google Map API 基本使用方法

Google Map API 基本使用方法

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

标签：map,api,方法,google

由于工作需要，这两天在看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>

投稿

Google Map API 基本使用方法

猜你喜欢