`
shenzhanwei
  • 浏览: 6526 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

10分钟学会Google Map API

阅读更多
前几天玩了玩Google的Map API,感觉还不错,很简单。但凡有过任何编程经验的同学,看完以下的教程,都可以在10分钟内掌握它的主要功能。另外我还做了个简单的小例子,有兴趣的话,请参见http://sunjian100.googlepages.com/map.html :]

    第一步:
    去http://www.google.com/apis/maps/signup.html 申请一个KeyID

    第二步:
    在HTML的<title></title>之间加上对MapAPI函数库的引用,
    <script. src="http://maps.google.com/maps?file=api&v=2&key= YourKeyID" type="text/javascript"></script>

    第三步:
    在HTML的<body></body>之间的任意位置加上一个名为map的DIV,
    <div id="map" style="width: 700px; height: 560px" align="center"></div>

    第四步:
    在名为map的DIV后面,加上GMap类的实例,
        <script. type="text/javascript">
        //创建GMap类的实例
        var map = new GMap(document.getElementById("map"));
        //添加一个控制条
        map.addControl(new GSmallMapControl());
        //设置显示模式为卫星影像
        map.setMapType(G_SATELLITE_TYPE);
        //设置中心点经纬度(上海)和缩放系数,并显示
        map.centerAndZoom(new GPoint(121.4838, 31.2517), 4);
        </script>

    第五步:
    随机增加10个标记点,
    var bounds = map.getBoundsLatLng();
    var width = bounds.maxX - bounds.minX;
    var height = bounds.maxY - bounds.minY;
    for (var i = 0; i < 10; i++) {
        var point = new GPoint(bounds.minX + width * Math.random(),
                 bounds.minY + height * Math.random());
        var marker = createMarker(point, i + 1);
        //添加标记点
        map.addOverlay(marker);
   }

    第六步:
    添加事件响应,
        function createMarker(point, number)
        {
           var marker = new GMarker(point);

           // Show this marker's index in the info window when it is clicked.
           var html = "Marker #<b>" + number + "</b>";
           GEvent.addListener(marker, 'click', function() {
           marker.openInfoWindowHtml(html);});

           return marker;
         }


分享到:
评论

相关推荐

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

    Google Map API V3是Google提供的一个JavaScript库,用于在网页上嵌入交互式地图。这个API提供了丰富的功能,如定位、路线规划、地图缩放和平移等。在这个压缩包中,包含了使用Google Map API V3来实现离线地图的...

    Google MAP 学习例程

    通过这个“Google MAP 学习例程”,你将逐步学会如何使用Google Map V3 API进行地图应用开发,包括创建和操作地图、添加标记和路径、使用各种地图服务,以及自定义地图交互。实践中不断探索,你将能创造出富有创新和...

    VC++环境开发GOOGLE MAP

    6. **源代码分析**:压缩包中的"VC GoogleMap"可能包含了示例程序的源代码,包括C++的后端代码和HTML/JavaScript前端代码。学习这些源码有助于理解如何在VC++环境中与谷歌地图API进行交互,例如如何获取用户的位置、...

    Google-map

    用mfc实现的google-earth地图显示,很简单的一个例子,主要是学会1、在应用程序中嵌入web控件,显示网页;2、google-map API的使用。注意初始化中文件的路径,要正确显示地图还需要处于联网状态。

    安卓Android源码——调用GoogleMap源码,点击事件在注释里面.zip

    这份名为"安卓Android源码——调用GoogleMap源码,点击事件在注释里面.zip"的资源包含了一个示例项目,演示了如何在Android应用中集成并操作Google Maps API。下面我们将详细探讨这个过程中的关键知识点。 首先,...

    googlemap js v3 gmap

    在“chapter10”中,可能会介绍如何利用Google Maps API V3实现地理编码,即将地址转化为经纬度坐标,以及反向地理编码,即从坐标点获取地址信息。这一章还可能涉及如何在地图上添加自定义标记(markers)和信息窗口...

    google map gis

    2. **使用对象**:实验中可能用到的API对象包括`google.maps.Map`(地图对象)、`google.maps.LatLng`(地理位置对象)、`google.maps.Marker`(标记对象)、`google.maps.KmlLayer`(KML图层对象)等。 通过这个...

    Android 调用GoogleMap源码,点击事件在注释里面-IT计算机-毕业设计.zip

    googleMap.setOnMapClickListener(new GoogleMap.OnMapClickListener() { @Override public void onMapClick(LatLng point) { Toast.makeText(MainActivity.this, "地图点击事件:(" + point.latitude + ", " + ...

    Apress.Beginning.Google.Maps.API.3代码

    10. **优化性能**:处理大量数据时,学会使用集群策略(例如`MarkerClusterer`库)、延迟加载和优化标记管理,以提高地图性能和用户体验。 11. **地图服务**:包括距离矩阵、方向服务和地理编码服务,可以帮助...

    flutter_map-master.zip

    通过深入研究“flutter_map-master.zip”中的示例项目,开发者不仅可以学会如何使用 Flutter Map,还能了解到如何将地图功能与 Flutter 的其他组件和功能相结合,创造出富有交互性和视觉吸引力的移动应用。

    OPENCMS GeoMap模块

    1. **Google Maps API集成**:OPENCMS GeoMap依赖于Google Maps API,所以你需要有一个有效的API密钥,并了解如何在OPENCMS中配置这个密钥,以便能够使用地图服务。 2. **内容管理系统集成**:模块需要与OPENCMS...

    类似googlemap的地图实现

    在实现类似Google Maps的功能时,我们可以选择开源的地图API,如OpenLayers、Leaflet或Mapbox。这些API提供了丰富的地图操作功能,并支持自定义样式和插件,非常适合初学者入门。 1. **OpenLayers**: OpenLayers是...

    google 地图浏览器

    标签 "QT GOOGLEMAP" 提供了实现这个地图浏览器所用的技术栈——Qt库和谷歌地图API。Qt是一个跨平台的C++图形用户界面应用程序开发框架,用于创建桌面、移动和嵌入式平台的应用程序。结合谷歌地图API,Qt可以帮助...

    Flex3实现的谷歌地图实例

    开发者通过学习并实践网上的GoogleMap教程,创建了这个项目,以便于理解和掌握如何在Flex环境中集成和操作谷歌地图API。 首先,我们来看看Flex3是如何与谷歌地图API结合的。谷歌地图API提供了JavaScript版本和Flash...

    Google Android SDK开发范例大全pdf完全版

    通过学习本书中的GoogleMap章节,开发者可以学会如何获取API密钥,如何在地图上添加标记,如何实现地图的缩放和平移,以及如何实现地理编码和反地理编码等功能。 此外,书中的内容还涵盖了Android的基础知识,如...

    2009.6.19—30举办3S研讨会暨Google Earth与Google Map等仿真建模与共享及ARCGIS与遥感高级程序员培训班

    2)Google Map API介绍;3)Google Map网络开发技术与应用:将详细介绍其开发实例:(1)Google Map与传统webgis区别;(2)目前国际最先进的网络GIS—————Google Map其二次开发的关键技术; 7、GM开发实例:...

    nodejs-google-map-v3

    **标题解析:** "nodejs-google-map-v3" 这个标题表明这是一个关于使用 Node.js 集成 Google Maps API 的项目,版本可能是 v3。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,允许开发者在服务器端使用...

    u-map

    这需要理解地图样式语言,如Mapbox Style Specification或Google Maps JavaScript API样式语言。 四、定位服务 u-map集成了CoreLocation框架,可以获取用户的实时位置。开发者需要了解CLLocationManager类的使用,...

    maps_api

    实际项目中,你可能还需要了解特定地图服务提供商的API文档,如Google Maps API、OpenStreetMap的Overpass API或Bing Maps API等,它们都有各自独特的使用方式和限制。通过实践和学习这些内容,你将能够构建出自己的...

    总结一天学会MyBatis框架所有知识.docx

    MyBatis起源于Apache的Ibatis项目,在2010年迁移到Google,然后在2013年进一步迁移到Github,成为了一个独立维护的开源项目。 学习MyBatis,首先需要准备的是开发环境。推荐使用Eclipse Neon 1版本,这是一个绿色免...

Global site tag (gtag.js) - Google Analytics