新手站长论坛|网站建设论坛|菜鸟建站论坛

注册

 

发新话题 回复该主题

网页中调用Google地图 [复制链接]

1#
很多网站喜欢在关于或联系我们页面中 添加一个Google地图,
以章显正规, 在 Zen Cart 上也可以很容易的添加一个这样的东西; 而且操作上相对更容易,
将 Google 地图引入自己的当前网站的方法有两种,
分别为 框架引用 和 通过 Google maps api 引用, 两种方法各有优缺点, 下面分别说一下
通过框架引用Google 地图 操作上便捷容易, 适合对代码不是很掌握的同学使用
缺点就是 定制性相对较差 页面中引入了框架结构.
通过Google maps api的方式引入Google 地图相对定制性较强, 应用面更宽泛一些
缺点就是需要自己有一定的动手能力.
废话说完 下面开始动手 实际操作如何将 Google 地图引入自己的网站;
先说 第一种方法 框架引用
一  登录自己的google 帐户 (不登录也可以)
二 打开 http://maps.google.com/
三 在搜索框中输入自己想要在地图上标注的地址信息 (参见图 1 黄色高亮标注)
四 右上角 工具栏点击 link , 复制位于 Paste HTML to embed in website 下的调用代码 (参见图 1 绿色高亮标注)
五 打开自己的Zen Cart 并进入后台 然后 工具 简易页面 关于或联系我们 将Google 地图调用代码粘贴在适当的位置 上即可;

图 1    (点击图片查看大图)
继续 第二种方法 Google maps API 引用
一 打开 https://code.google.com/intl/zh-CN/apis/maps/signup.html
二 在这里按提示输入相关信息 申请一个 Google maps API  密钥 并复制保存记录好 (如图2 标示)
图 2   点击图片查看大图
三 打开 includes/templates/你的当前模板目录/common/html_header.php 在 </head> 前 加入
1
<script src="http://maps.google.com/maps?file=api&amp;v=3&amp;sensor=true&amp;key=你的Key" type="text/javascript"></script>
四 继续 在 </head> 前 加入下面的 JS 详细说明参见代码中的 注释
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
<script type="text/javascript"> <!-- //initMap()函数,将地图程序加入页面 function initMap() { //GBrowserIsCompatible()确定Api能否兼容当前浏览器 if (GBrowserIsCompatible()) { //在ID为"Gmap"的层内显示地图 var map = new GMap2(document.getElementById("Gmap")); //定义一个经纬度点 var point = new GLatLng(47.48806400761193, 19.105825424194336); //定义一个标注对象 var marker = new GMarker(point); //在地图上加入标注 map.addOverlay(marker); //定义字符串 var info = "<font color='#339900'>1087 Budapest &nbsp; Kőbányai Út 29</font>"; //设置点击出现冒泡,内容为预先定义的HTML字串 marker.bindInfoWindowHtml(info); //设置地图中心点和缩放级别 map.setCenter(new GLatLng(47.48806400761193, 19.105825424194336), 12); //加载大“鱼骨”,包含方向、缩放按钮和缩放级别控制滑块 map.addControl(new GLargeMapControl()); //加载地图类型按钮 map.addControl(new GMapTypeControl()); //加载小地图 map.addControl(new GOverviewMapControl()); //加载比例尺 map.addControl(new GScaleControl()); } } //--> </script>
五 在需要引入地图的页面中适当的位置 加入 下面的代码 详细说明参见代码中的注释
至此 在网站中引入Google 地图的两种方法介绍完毕!

要点提示:
一. 使用 google maps api 的方式引入地图 在页头导入 对应的JS库时 你的Key 对应 你所申请到的 密钥
二. google maps api 密钥的申请地址, 最好使用与当前网站语言一至的语言申请, 在方法二中的提供的申请地址为简体中文地址 在此地址右上角 有对应的语言选择
三. 配置 google maps api 涉及到的标注地址 经纬度 可通过如下方式获取;
1. 打开 http://maps.google.com/
2. 如图1 中 黄色高亮标示 在这里输入要查询的地址并回车
3. 在浏览器 将下面的JS代码粘贴并回车 就会得到对应的地址经纬度 如图3
1
javascript:void(prompt('',gApplication.getMap().getCenter()));

4. 复制得到的经纬度值 粘贴到JS配置项中对应的代码位置上 即可
四. 页面地图层 的样式调整 可按实际情况配置 比如宽高
对于方法一 可调整 引用代码中  width:值  和 height: 值 控制宽高
对于方法二 可调整 style="width: 650px; height: 420px; 中的值来控制 或另行指定样式类或ID来控制调整样式
五. 无论哪种方法, 在Zen Cart 自定义页面中 引入地图粘贴代码时 请将当前编辑器切换到文本编辑器或 HTML 代码状态下粘贴
六. 如果你有足够的耐心和想要更多的去了解一下 Google maps api 哪么可以仔细的看下 Google 官方提供的帮助手册, 不过我估计十之八九会让大部分同学看的云里雾去,不知所然, Google 的帮助说明总是弄的这么高深  >.<
Google maps API 帮助手册地址:
https://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/basics.html
最后附一张 通过 Google maps api 方式引入的效果 截图 (点击图片查看大图)
分享 转发
TOP
2#

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  <html>   
      <head>   
      <script   
          src="http://maps.google.com/maps?file=api&v=2&sensor=true;   
          key=ABQIAAAAevysxt9O5lBUCrSalm80MxQx8gmx0K-_Fjj4Tf8bNXH3BBSxZRRmI_CuZM2zQyuXEpG_uxt-aqPr-A"   
          type="text/javascript"></script>   
          //author:67566894   <script language="javascript" type="text/javascript">   
      function load() {     //加载地图   
          if (GBrowserIsCompatible()) {   
              var map = new GMap2(document.getElementById("map"));   
              map.addControl(new GSmallMapControl());    //放大缩小   
              map.addControl(new GMapTypeControl());     //地图种类   
              map.enableScrollWheelZoom();    //启用鼠标滚轮   
              map.setCenter(new GLatLng(39.9000, 116.3000), 6);   //地图坐标 三个参数分别为 "纬度" "经度" "比例尺"   
              
              function createMarker(point, address,name,tel) {  //创建标记内容及标记的鼠标事件   
                 var marker = new GMarker(point);   
                 var html = '<div>'+   
                     '<a >Name:'+ name +'</a><br/>'+   
                     '<a >Address:'+address +'</a><br/>'+   
                     '<a >telephone:'+tel +'</a>'+   
                     '</div>';   
                 GEvent.addListener(marker, "mouseover", function() {   
                     marker.openInfoWindowHtml(html);   
                 });   
                 GEvent.addListener(marker, "mouseout", function() {   
                     marker.closeInfoWindow();   
                 });   
                 GEvent.addListener(marker, "click", function() {   
                     map.setCenter(point, 12);   
                 });   
                 return marker;   
             }   
             var point = new GLatLng(39.9000,116.3000);     // 设置标记   
             map.addOverlay(createMarker(point,'beijing','sh','123456'));//加入标记   
         }     
     }      
  </script>   
      </head>   
      <body onload="load()">   
          <div id="map" style="width: 750px; height: 500px"></div>   
      </body>   
  </html>
TOP
发新话题 回复该主题