将google地图嵌入你自己的网站

最新推荐文章于 2023-04-06 18:13:37 发布

wangwang3ok

最新推荐文章于 2023-04-06 18:13:37 发布

阅读量183

点赞数

分类专栏：网站前台文章标签： Google 脚本浏览器 HTML

网站前台专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Google地图在我们网站上的嵌入分为4步：

1. 使用我们的网站域名在google map的主页上注册得到一个对应于我们网站的密钥key，申请的网址是：http://code.google.com/apis/maps/signup.html

2. 引入google map的js到显示地图的页面map.aspx.
<script src="http://maps.google.com/maps?file=api&;v=2&key=ABQIAAAAXi1g1iTcoQscVRePd3fXahRf-8HxJk-2F2Noi85d_zoThakQmBQ--TCafnsJU19bKSUFupRwZQ4PdQ" type="text/javascript"></script>

注意其中的参数key就是我们申请得到的密钥

3. 嵌入网站—写控制的js脚本，写表示的层
a. js脚本
<script type="text/javascript">

//<![CDATA[

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("ctl00_ContentPlaceHolder1_map"));

map.setCenter(new GLatLng(<%=map_x%>,<%=map_y%>), 15);

map.setMapType(G_NORMAL_MAP);

map.removeMapType(G_HYBRID_MAP);

map.addControl(new GLargeMapControl());

var point =new GLatLng(<%=map_x%>,<%=map_y%>)

map.addOverlay(new GMarker(point));

}

}

</script>

注意： map_x 和 map_y分别是地图中心点的纵横坐标，可以由自己设定。

b.用来显示map的层
<div id="map" style="width: 430px; height: 400px;" runat="server">

4. 在body中加入函数调用
<body οnlοad="load()" οnunlοad="GUnload()">

注意：其中onunload动作触发的事件GUnload()是google map 2.0版本的新特性，用来处理浏览器内存泄漏，不要省略这个。