谷歌地图添加.docxVIP

很多网站喜欢在关于或联系我们页面中添加一个Google地图,以章显正规, 在?Zen Cart?上也可以很容易的添加一个这样的东西; 而且操作上相对更容易,将?Google?地图引入自己的当前网站的方法有两种,分别为框架引用和通过 Google maps api 引用, 两种方法各有优缺点, 下面分别说一下通过框架引用Google 地图操作上便捷容易, 适合对代码不是很掌握的同学使用缺点就是定制性相对较差页面中引入了框架结构.通过Google maps api的方式引入Google 地图相对定制性较强, 应用面更宽泛一些缺点就是需要自己有一定的动手能力.废话说完下面开始动手实际操作如何将 Google 地图引入自己的网站;先说?第一种方法框架引用一??登录自己的google 帐户 (不登录也可以)二打开 /三在搜索框中输入自己想要在地图上标注的地址信息 (参见图 1 黄色高亮标注)四右上角工具栏点击 link , 复制位于 Paste HTML to embed in website 下的调用代码 (参见图 1 绿色高亮标注)五打开自己的Zen Cart 并进入后台然后工具简易页面关于或联系我们将Google 地图调用代码粘贴在适当的位置上即可;图 1????(点击图片查看大图)继续?第二种方法 Google maps API 引用一打开 /intl/zh-CN/apis/maps/signup.html二在这里按提示输入相关信息申请一个 Google maps API??密钥并复制保存记录好 (如图2 标示)图 2???点击图片查看大图三打开?includes/templates/你的当前模板目录/common/html_header.php?在?/head?前加入1script src=/maps?file=apiamp;v=3amp;sensor=trueamp;key=你的Keytype=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 40script 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);?//定义一个标注对象?varmarker?=?new?GMarker(point);?//在地图上加入标注?map.addOverlay(marker);?//定义字符串?varinfo?=?font color=#3399001087 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(newGOverviewMapControl());?//加载比例尺?map.addControl(new?GScaleControl());?}?}?//--/script五在需要引入地图的页面中适当的位置加入下面的代码详细说明参见代码中的注释至此在网站中引入Google 地图的两种方法介绍完毕!?要点提示:一.?使用 google maps api 的方式引入地图在页头导入对应的JS库时你的Key 对应你所申请到的密钥二.?google maps api 密钥的申请地址, 最好使用与当前网站语言一至的语言申请, 在方法二中的提供的申请地址为简体中文地址在此地址右上角有对应的语