`
wangwang3ok
  • 浏览: 78246 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

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

阅读更多
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  onload="load()" onunload="GUnload()"> 

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

分享到:
评论

相关推荐

    如何将谷歌地图嵌入网页并默认显示指定地理位置

    至此,你已经成功地将谷歌地图嵌入到网页中,并且默认显示了指定的地理位置。用户打开网页时,将会看到以设定的坐标为中心的地图。如果你需要添加更多功能,如搜索、路线规划等,可以通过谷歌地图API的其他方法和...

    google地图api文档

    Google 地图 API 是一款功能强大且广泛应用的 Web 服务,允许开发者在自己的网站中嵌入 Google 地图,添加丰富的功能和交互性,提供更好的用户体验。下面是 Google 地图 API 的基础知识点和重要概念: 1. Google ...

    谷歌地图Google Map API V3中文开发文档

    谷歌地图 Google Map API V3 中文开发文档是 Google 公司提供的一种基于 Web 的地图应用程序接口,允许开发者在自己的网站或应用程序中嵌入谷歌地图,以提供地图检索、路线规划、地标显示等功能。本文档旨在为开发者...

    如何向谷歌地图嵌入到网页并指定显示当前的地理位置

    以上就是将谷歌地图嵌入网页并自动显示用户当前位置的基本步骤。你还可以根据需要添加更多功能,如搜索框、信息窗口、自定义标记等,进一步丰富地图的交互性。记住,使用谷歌地图API可能涉及费用,所以要关注API使用...

    Qt加载百度地图和谷歌地图

    在本文中,我们将深入探讨如何在Qt环境中加载和使用百度地图及谷歌地图。Qt是一个功能强大的C++图形用户界面库,它可以与JavaScript和HTML结合,为开发者提供丰富的Web交互功能。我们将主要关注如何利用QWebView类来...

    Google地图瓦片下载

    本篇文章将深入探讨如何进行"Google地图瓦片下载"以及相关的技术要点。 地图瓦片(Tile)是一种将大型地图分块显示的技术,它将整个地球表面分割成无数个正方形的小块,每一块称为一个瓦片。这样处理的好处在于,...

    将GoogleMap嵌入到桌面应用程序窗口

    总之,将Google Map嵌入到桌面应用程序窗口涉及到对WebBrowser控件的使用,以及对Google Maps JavaScript API的熟悉。通过上述步骤,你可以创建一个基础的交互式地图应用。随着对API的深入理解和实践,可以进一步...

    vc谷歌地图开发_googlemap

    对于开发者来说,谷歌地图API(Application Programming Interface)是一个强大的工具,允许他们将地图功能集成到自己的应用程序中。在VC++(Visual C++)环境下,我们可以利用谷歌地图API来开发地图相关的应用。...

    google离线地图API包 + 地图数据

    离线地图API是一种技术,允许开发者在没有网络连接的情况下使用地图服务。...通过学习和应用这些资源,你可以创建自己的离线地图应用,无论是在户外探险、车辆导航,还是在没有网络覆盖的区域,都能提供地图服务。

    3.(leaflet篇)leaflet接入高德、openstreetmap、google地图.zip

    在本文中,我们将深入探讨如何使用Leaflet.js库...通过理解并应用上述代码和方法,你将能够在自己的项目中实现丰富的地图功能。同时,不要忘记阅读并参考博客文章中的详细步骤,这将有助于你更好地理解和实践这些知识。

    android使用谷歌地图,利用高德地图加载瓦片图层

    本篇将深入探讨如何在Android应用中使用谷歌地图API以及如何利用高德地图的数据资源来加载自定义的瓦片图层。这种技术通常用于显示特定区域的高精度地图、卫星图像或者自定义的地图样式。 首先,我们要了解谷歌地图...

    网页嵌入地图

    这一技术的实现通常依赖于地图服务提供商,如谷歌地图、百度地图、高德地图等,它们提供了API(应用程序接口)供开发者使用。 首先,要理解地图API的工作原理。API允许开发者通过编程方式与地图服务进行交互,获取...

    非常简单的控件可以让你把Google Earth上嵌入到你程序中

    标题中的“非常简单的控件可以让你把Google Earth上嵌入到你程序中”指的是使用特定的开发工具或组件,能够将Google Earth的功能集成到自定义的应用程序中,为用户提供一个直观且互动的地图展示平台。这一过程通常...

    Google map 谷歌地图 Google地图 V3 第三版

    谷歌地图API(Google Maps API)是谷歌提供的一套用于在网页上嵌入交互式地图的开发工具。V3版本是其一个重要的更新,旨在提高性能、简化API接口并减少对JavaScript库的依赖。这篇博文将深入探讨Google Maps V3的...

    谷歌地图开发实例

    首先,谷歌地图API是谷歌提供的一项服务,允许开发者在其网站上嵌入交互式地图,并进行自定义配置。它提供了丰富的功能,如地图显示、标记、路径规划、地理编码等。要使用谷歌地图API,你需要在谷歌开发者控制台注册...

    Google地图API接口

    Google地图API是Google提供的一系列接口,允许开发者在自己的网站或应用中集成地图功能,进行地理定位、路线规划、地图渲染等操作。这些接口广泛应用于各种场景,如出行导航、位置服务、商业分析等。本篇文章将深入...

    水晶易表中使用谷歌地图案例文件

    这个“水晶易表中使用谷歌地图案例文件”就是专门针对这种集成的应用实例,它为我们提供了学习和实践如何在水晶易表中嵌入和操作谷歌地图的宝贵资料。 1. **水晶易表基础** 水晶易表是Business Objects公司(现为...

    谷歌地图API实现运行轨迹 画箭头操作的小例子

    谷歌地图API是一个强大的工具,它允许开发者在网页上嵌入地图并进行各种定制化操作,如标记、路径规划、实时定位等。在这个特定的例子中,我们将深入探讨如何使用谷歌地图API来实现运动轨迹的绘制以及在轨迹上添加...

    CAD软件中嵌入谷歌地图的算法设计.pdf

    CAD软件中嵌入谷歌地图的算法设计 在当前信息技术高速发展的背景下,地理信息系统(GIS)与计算机辅助设计(CAD)技术的结合越来越紧密。CAD软件广泛应用于土木工程、建筑设计等领域,其功能的不断扩展使得CAD软件...

Global site tag (gtag.js) - Google Analytics