首页 >> 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&v=3&sensor=true&key=你的Key" type="text/javascript"></script>

四继续在 </head> 前加入下面的 JS 详细说明参见代码中的注释

<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>