`
wjm901215
  • 浏览: 154268 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Google Map API 基本使用方法

    博客分类:
  • MAP
 
阅读更多

方法说明:
   1、GBrowserIsCompatible() -- 是否支持Google Map API
   2、shopLat -- 酒店的经度坐标,
      shopLng -- 酒店的纬度坐标 
   3、new GLatLng(shopLat, shopLng) -- 设置经纬度
   4、map.setCenter(new GLatLng(shopLat, shopLng), 14) -- 设置地图默认的中心点经纬度 
      参数说明: 
      new GLatLng(shopLat, shopLng) -- 设置中心点的经纬度
      14 -- 地图的默认缩放比例大小值,范围为1 - 18
   5、new GMap2(document.getElementById("shopgooglemap")) -- 获取显示的地图容器
   6、map.setMapType(G_NORMAL_MAP); -- 设置显示地图的类型
      可选值:
      1. G_NORMAL_MAP -- 默认地图样式
      2. G_SATELLITE_MAP -- Google Earth 卫星地图
      3. G_HYBRID_MAP -- 混合模式地图
   7、new GIcon(G_DEFAULT_ICON) -- 设置标记样式
   8、addControl() -- 给地图添加控件
      常用的可选控件:
      1. new GLargeMapControl() -- 大的地图缩放级别控件
      2. new GOverviewMapControl() -- 地图缩略图控件  
      3. new GScaleControl() -- 比例尺控件
      4. new GMapTypeControl() -- 地图类形选择控件
   9、enableDoubleClickZoom() -- 双击(鼠标右键)放大/(鼠标左键)缩小地图比例
  10、map.enableScrollWheelZoom() -- 滚动滑轮方法(向前)放大/(向后)缩小地图比例
  11、enableContinuousZoom() -- 允许连贯改变地图比例
  12、createMarker(latlng) -- 自定义方法:
      方法说明:
      new GMarker(latlng) -- 在地图中设置标签,参数latlng -- 标签的坐标
      Event.addListener(marker,event,function) -- 给标签设置事件 
      参数说明:
      marker -- 标签对象,
      event -- 事件名称
      function -- 时间的处理函数
      openInfoWindowHtml(latlng, myHtml) -- 将信息框添加到标签上
      参数说明:
      latlng -- 标签坐标,
      myHtml -- 提示信息的HTML字符串
===============================================================================  
获取地图中心坐标:javascript:void(prompt('中心坐标',gApplication.getMap().getCenter()));        
===============================================================================

 

 

function initMap(){ 
    if(GBrowserIsCompatible()){ 
         var shopLat=message[0][0]; 
         var shopLng=message[0][1]; 
          
         var map = new GMap2(document.getElementById("shopgooglemap")); 
         map.setCenter(new GLatLng(shopLat, shopLng), 14); 
              
         function createMarker(latlng){ 
            var marker = new GMarker(latlng); 
                marker.value=0; 
             
            GEvent.addListener(marker,"click", function(){ 
                var myHtml = "<span id=\"shopInfo\">"; 
                    myHtml += "<h2>" + message[1][0] + "</h2><br />"  
                for(var j=1;j<message[1].length;j++){ 
                    myHtml += message[1][j]+"<br />"; 
                }  
                    myHtml +="</span>"; 
                map.openInfoWindowHtml(latlng, myHtml); 
                } 
            ); 
            return marker; 
         } 

         var point = new GLatLng(shopLat,shopLng); 
         map.addOverlay(createMarker(point)); 
          
         map.enableDoubleClickZoom(); 
         map.enableScrollWheelZoom();  
         map.enableContinuousZoom();  
         
         map.addControl(new GLargeMapControl()) 
         map.addControl(new GOverviewMapControl()); 
         map.addControl(new GScaleControl());   
    } 
    else{ 
        alert("对不起,您的浏览器不支持创建地图!")     
    } 
}

 

分享到:
评论

相关推荐

    Google Map API 使用示例

    本示例将深入探讨如何使用 Google Map API,帮助你理解和掌握其核心概念及应用。 首先,要使用 Google Map API,你需要在 Google Cloud Platform 上创建一个项目,并启用 Maps JavaScript API。获取 API 密钥是关键...

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

    谷歌地图 Google Map API V3 中文开发文档提供了一个详细的中文开发指南,涵盖了谷歌地图 Google Map API V3 的使用方法、相关类库、事件处理等方面的知识点。开发者可以根据自己的需求,选择合适的组件和方法来创建...

    Google Map API基本源码

    Google Map API是一个...综上所述,“Google Map API基本源码”可能包含上述功能的实现示例,对于学习和理解API的使用非常有帮助。通过研究这些源码,开发者能够更好地掌握如何在自己的项目中灵活运用Google Map API。

    google map api开发源代码

    9. **权限和密钥管理**:使用Google Map API需要申请API密钥,源代码可能会演示如何正确配置和管理API密钥,避免超出使用限制。 10. **响应式设计**:为了适应不同设备和屏幕尺寸,源代码可能实现了地图的响应式...

    google map api学习

    这个API密钥是连接你的应用和谷歌地图服务的桥梁,确保你的应用能够合法地使用API资源。 谷歌地图API主要基于JavaScript,因此熟悉JavaScript编程基础是必要的。API的核心在于`&lt;script&gt;`标签,其中包含API的URL和你...

    Google Map API 使用详解

    ### Google Map API 使用详解 #### 一、Google Map API 概览 Google Map API 是一套强大的工具集,允许开发者在其网站或应用中嵌入并定制谷歌地图。这不仅提升了用户体验,也为开发者提供了丰富的地理信息展示手段...

    GOOGLE MAPapi示例

    本文详细介绍了Google Maps JavaScript API 的基本用法,包括如何设置地图的基本属性、添加标记以及展示信息窗口等内容。通过这些示例代码,开发者可以快速上手并构建出具有丰富互动性的地图应用。同时,还介绍了...

    GoogleMap API + ASP.NET(C#)

    在"SampleWebSite"这个压缩包中,可能包含了一个使用Google Map API 和 ASP.NET(C#)开发的示例网站。这个网站可能演示了如何在ASP.NET环境中集成Google Map API,展示如何显示地图、进行地址查询、添加标记等功能。...

    Google Map Api 调用样例程序(Java版)

    在IT行业中,Google Map API是一个广泛使用的工具,它允许开发者集成地图功能到自己的应用程序中,无论是Web应用还是桌面应用。本示例程序是基于Java语言实现的,它为我们展示了如何利用Google Map API来画点和画线...

    google map api v3.18.0 离线开发包

    总的来说,"google map api v3.18.0 离线开发包"为开发者提供了在无网络环境下使用谷歌地图API的功能,使得地图服务在多种场景下都具备了可行性。通过熟练掌握和应用这个API,开发者可以创建出丰富多样的地图应用。

    Google Map Api

    Google Map API 是一款由谷歌公司提供的强大工具,用于在网页或移动应用中集成地图功能。这个API允许开发者将交互式地图集成到他们的网站或应用程序中,提供定位、导航、地理编码、路线规划等多种功能。最新版的...

    google map api v3源码

    由于这个压缩包名为"WebMap",里面可能包含了一个简单的web应用,展示如何使用谷歌地图API V3来创建一个网页地图。开发者可以通过分析和学习这个源码,了解上述知识点的实际应用,并进一步扩展自己的地图应用开发...

    google map api 实现自定义mark和其移动

    google map api 实现自定义mark和其移动

    Google Map API获取地理位置信息

    在IT领域,Google Map API是开发人员常用的工具之一,它允许我们通过JavaScript编程语言与Google Maps服务进行交互,获取和处理地理位置信息。...理解并熟练使用Google Map API,能极大地提升你的Web应用的用户体验。

    google map api 最新参考文档

    google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档

    基于Google Map API的简单地图

    首先,我们要了解Google Map API的基本用法。它是Google提供的JavaScript库,通过在网页中引入API脚本,我们可以调用各种地图相关的方法。为了显示用户所在地区,API提供了获取用户地理位置的能力。这通常依赖于...

    Google Map api V3 (3.9.12)的离线开发包

    Google Map API V3(3.9.12)是谷歌提供的一个用于在网页上嵌入交互式地图的服务,它是Google Maps JavaScript API的第三个主要版本。这个离线开发包允许开发者在没有网络连接的情况下进行地图应用的开发和测试,这...

    GoogleMap Api二次开发+Asp.Net+数据库+GPS

    在本实例中,我们主要探讨如何使用GoogleMap API进行二次开发,并结合Asp.Net、数据库以及GPS技术,创建一个功能丰富的Web应用。首先,我们来深入理解这些关键知识点。 1. GoogleMap API: GoogleMap API是Google...

    谷歌地图API-google map api v3

    本篇文章将详细介绍API的各个组成部分及其使用方法。 #### 版本说明 - **版本**: 3.15 - **发布日期**: 2013年2月19日 - **API状态**: 特性稳定,接口保持不变直至该版本退役。 - **最新版本**: 可查阅实验性开发...

Global site tag (gtag.js) - Google Analytics