首 页  >>  E商学院  >>  zencart百科  >>  给网站页面添加Google地图

给网站页面添加Google地图

很多网站喜欢在关于或联系我们页面中 添加一个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"> <!-- /**
 *
 * @ By KIRA
 * @ QQ: 6171718
 * @ Email: kira@kpa7.net
 * @ Blog: http://zcbk.org
 *
 */ //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 地图的两种方法介绍完毕!


 


点击次数:1052  发布日期:2013-04-15  【打印此页】  【关闭