`
fly.net.cn
  • 浏览: 187326 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

google map 示例

GoogleJavaScriptHTMLMicrosoftXML 
阅读更多
代码
  1. <!---->
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">  
  4.   <head>  
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>  
  6.     <title>Google Maps JavaScript API Exampletitle>  
  7.     <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALZrWbwv15xcW6o6Rz2I9OBT8BhQlyUVBQhI7yb8dqdkP7sHdrRTkgtKBUMAsHSYcx-k3lrwvWHbe9w"  
  8.       type="text/javascript">script>  
  9.     <script type="text/javascript">  
  10.         
  11.     function load() {   
  12.       if (GBrowserIsCompatible()) {   
  13.            
  14.         // Create a base icon for all of our markers that specifies the shadow, icon   
  15.                 // dimensions, etc.   
  16.                 var baseIcon = new GIcon();   
  17.                 baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";   
  18.                 baseIcon.iconSize = new GSize(20, 34);   
  19.                 baseIcon.shadowSize = new GSize(37, 34);   
  20.                 baseIcon.iconAnchor = new GPoint(9, 34);   
  21.                 baseIcon.infoWindowAnchor = new GPoint(9, 2);   
  22.                 baseIcon.infoShadowAnchor = new GPoint(18, 25);   
  23.   
  24.            
  25.         // Create our "tiny" marker icon   
  26.                 var icon = new GIcon();   
  27.                 icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";   
  28.                 icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";   
  29.                 icon.iconSize = new GSize(12, 20);   
  30.                 icon.shadowSize = new GSize(22, 20);   
  31.                 icon.iconAnchor = new GPoint(6, 20);   
  32.                 icon.infoWindowAnchor = new GPoint(5, 1);   
  33.   
  34.           
  35.         // Center the map on Palo Alto   
  36.                 var map = new GMap(document.getElementById("map"));   
  37.             //  map.addControl(new GSmallMapControl());   
  38.                 map.addControl(new GLargeMapControl());    
  39.                 //map.addControl(new GSmallZoomControl());   
  40.                 map.addControl(new GMapTypeControl());   
  41.                 map.centerAndZoom(new GPoint(106.083984375,36.94989178681327),13);   
  42.                    
  43.                    
  44.                 // Download the data in data.xml and load it on the map. The format we   
  45.                 // expect is:   
  46.                 // <markers>  
  47.                 //   <marker lat="37.441" lng="122.141"/>  
  48.                 //   <marker lat="37.322" lng="121.213"/>  
  49.                 // markers>  
  50.                 var request = GXmlHttp.create();   
  51.                 request.open("GET", "http://www.step1.cn/GoogleAPI/map/data.xml", true);   
  52.                 request.onreadystatechange = function() {   
  53.                 if (request.readyState == 4) {   
  54.                      var xmlDoc = request.responseXML;   
  55.                      var markers = xmlDoc.getElementsByTagName("marker");   
  56.                      for (var i = 0; i < markers.length; i++) {   
  57.                         var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),   
  58.                              parseFloat(markers[i].getAttribute("lat")));   
  59.                       var marker = createMarker(point,i);   
  60.                       map.addOverlay(marker);   
  61.                      }   
  62.                     }   
  63.                 }   
  64.                 request.send(null);   
  65.   
  66.   
  67.                 // Creates a marker whose info window displays the given number   
  68.                 function createMarker(point, index) {    
  69.                      // Create a lettered icon for this point using our icon class from above   
  70.         var letter = String.fromCharCode("A".charCodeAt(0) + index);   
  71.         var icon = new GIcon(baseIcon);   
  72.         icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";   
  73.         var marker = new GMarker(point, icon);   
  74.          
  75.         // Show this marker's index in the info window when it is clicked   
  76.         var html = "Marker " + letter + "b>";   
  77.         GEvent.addListener(marker, "click", function() {   
  78.           marker.openInfoWindowHtml(html);   
  79.         });   
  80.          
  81.         return marker;   
  82.             }    
  83.                
  84.             // Add 10 random markers in the map viewport   
  85.             var bounds = map.getBoundsLatLng();   
  86.             var width = bounds.maxX - bounds.minX;   
  87.             var height = bounds.maxY - bounds.minY;   
  88.             for (var i = 0; i < 1; i++) {   
  89.                  var point = new GPoint(bounds.minX + width * Math.random(),   
  90.                             bounds.minY + height * Math.random());   
  91.              var marker = createMarker(point, i + 1);   
  92.                  map.addOverlay(marker);   
  93.             }   
  94.                
  95.                
  96.             // Add a polyline with 4 random points. Sort the points by longitude so that   
  97.       // the line does not intersect itself.   
  98.       var points = [];   
  99.       for (var i = 0; i < 5; i++) {   
  100.         points.push(new GPoint(bounds.minX + width * Math.random(),   
  101.                               bounds.minY + height * Math.random()));   
  102.       }   
  103.       points.sort(function(p1, p2) { return p1.x - p2.x; });   
  104.       map.addOverlay(new GPolyline(points));   
  105.           
  106.      var polyline = new GPolyline([new GPoint(116.1419, 37.4419),   
  107.                               new GPoint(122.1519, 40.4519)],   
  108.                               "#ff0000", 10);   
  109.       map.addOverlay(polyline);   
  110.            
  111.      }//end if   
  112.          
  113.          
  114.     } //end load()   
  115.       
  116.     script>  
  117.   head>  
  118.   <body onload="load()" onunload="GUnload()">  
  119.     <div id="message">div>  
  120.     <div id="map" style="width: 750px; height: 550px">div>  
  121.   body>  
  122. html>  
分享到：
| 拷贝构造函数的作用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    VB.NET不使用API加载Google Map示例

    本示例探讨了如何在VB.NET应用中不依赖Google Maps API直接加载地图。这通常是为了避免API调用限制、减少对网络资源的依赖或者进行离线地图展示。以下是一些关键知识点和实现步骤： 1. **HTML嵌入方法**： 不使用...

    Google Map API 使用示例

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

    GOOGLE MAPapi示例

    ### GOOGLE MAP API 示例知识点解析 #### 一、Google Maps JavaScript API 概述 Google Maps JavaScript API 是一个功能强大的工具包，允许开发者将交互式的地图嵌入到网页中。通过使用这个API，开发者可以轻松地...

    google map 查询示例

    利用google map 进行地址的查询，是入门的示例性代码。

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

    谷歌地图 Google Map API V3 中文开发文档 谷歌地图 Google Map API V3 中文开发文档是 Google 公司提供的一种基于 Web 的地图应用程序接口，允许开发者在自己的网站或应用程序中嵌入谷歌地图，以提供地图检索、...

    googleMap折线示例

    ### Google Maps API：绘制折线图示例解析 #### 一、引言 在Web开发领域，特别是地理信息系统（GIS）应用中，Google Maps API是一个非常强大的工具，它允许开发者在网页上集成交互式地图。其中，绘制路径或折线是...

    googlemap地图demo+doc

    3. "AmHKGoogleMap" - 这可能是某个特定的Google Map示例项目或者是一个包含自定义功能的地图模块。它可能展示了如何自定义地图的行为、样式，或者实现了特定的地理位置功能，比如搜索、导航等。 总的来说，这个...

    GoogleMap谷歌地图demo

    这个标题暗示我们将会讨论一个基于GoogleMap API开发的示例应用。一个demo通常包含基本和常见的功能，旨在展示API的能力，帮助开发者了解如何开始自己的项目。在这个案例中，这个demo可能包含了地图加载、定位、路线...

    wpf google map v3 示例

    **WPF Google Map V3 示例详解** 在Windows Presentation Foundation（WPF）开发中，集成Google Maps API可以帮助我们创建丰富的地理信息系统应用。本示例重点介绍了如何在WPF项目中使用Google Maps API V3，实现...

    google map jsv3 示例

    在提供的"jsmapv3示例"文件中，可能包含了以上这些功能的代码示例，你可以通过学习和研究这些示例，更好地理解和掌握Google Maps JavaScript API V3的用法。记得在实际项目中，根据需求进行适当的调整和优化，以实现...

    google map应用实例

    2. 示例代码：可能包含JavaScript或HTML/CSS文件，展示了如何使用Google Map API加载这些离线地图切片，并在用户界面中展示。 3. 数据管理：可能有一个数据库或文件系统用于存储地图元数据，如地理位置、缩放级别等...

    GoogleMap 中文API + 示例

    - `googlelinli.html`：可能是一个包含GoogleMap API实际应用的HTML页面示例，可以从中学习如何在网页中集成地图。 - `20090602_GOOGLE地图应用.pdf`：这可能是一份关于Google Map API应用的教程或案例集，详细讲解...

    Ext Google Map 简易开发框架

    Ext Google Map简易开发框架是一种将流行的JavaScript库ExtJs与Google Maps API相结合的开发方式，用于构建功能丰富的地理信息系统。这个框架允许开发者轻松地在网页上展示地图，管理地图图层，控制图层的可见性，...

    googleMap根据经纬度获取地理位置

    首先，`googleMap根据经纬度获取地理位置`这个标题涉及到的核心技术是Google Maps Geocoding服务。Geocoding是将地址或坐标（经纬度）转换为地理坐标的过程，反之亦然。在Google Maps API中，我们可以使用Geocoding ...

    VB 调用GoogelMap的示例

    VB 调用GoogelMap示例 VB控制GoogelMap实现加载地图、控制偏移、添加删除标记点等。 思路： VB调用WebBrowser控件加载本地页面打开GoogelMap。 再调用所打开页面的javascript脚本函数实现定位和添加标注等功能...

    googlemap 反向地址解析示例

    googlemap 反向地址解析示例，即由坐标解析出街道门牌号地址。

    GoogleMap控件下载

    - 示例代码：展示如何使用GoogleMap控件的HTML和JavaScript文件。 - 文档：关于API接口和控件使用的指南。 - 图标资源：用于标记和其他视觉元素的图像文件。 ### 注意事项 - 使用Google Maps API可能产生费用，...

    Google Map API最新版本(V3)代码示例源码和教程

    Google Map API最新版本(V3)代码示例源码和教程，包括了添加地图、在地图上添加和自定义marker的内容、添加曲线和曲线的点击事件等最常用功能。详细教程请见：...

    google map v2 Demo

    public void onMapReady(GoogleMap googleMap) { // 在这里，你可以对地图进行各种定制，如添加标记、路径等 GoogleMap map = googleMap; map.getUiSettings().setZoomControlsEnabled(true); map....

Magicbox
Global site tag (gtag.js) - Google Analytics