google map 示例

最新推荐文章于 2024-09-02 07:27:51 发布
最新推荐文章于 2024-09-02 07:27:51 发布 · 201 阅读 · 0
文章标签：

#Google #JavaScript #HTML #Microsoft #XML #ViewUI

本文介绍了一个使用 Google Maps JavaScript API 的示例应用。该应用通过 API 在地图上显示标记，并加载 XML 数据来绘制多个标记和折线。此外，还展示了如何创建自定义图标以及如何根据点击事件打开信息窗口。
代码
  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>  
Google地图Google map 示例代码根据地址查询功能 聚类标记 普通标记
闲走天涯的博客
12-24 773
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title></title> </head> <style> body{ padding:0; margin: 0; -webkit-tap-hi
google map的一个例子
脑袋不好使
11-23 631
http://www.extjs.com/deploy/dev/examples/window/gmap.html
google地图例子,google Map例子
07-13
简单的google地图例子,google Map例子
google Map的一个简单实例
iteye_17609的博客
01-17 260
[code="java"]public class mapActivity extends MapActivity { private MapView mMapView; private MapController mMapController; private GeoPoint mGeoPoint; /** Called when the activit...
google map定位的简单实例
u011696342的专栏
12-29 454
http://www.w3.org/TR/html4/loose.dtd"> http://ditu.google.cn?file=api&v=2&key=ABQIAAAACeiZsHWX3cH6DSzXsRZ4ZhSm4yWMj7VobllwgidfhRjwLCDWEBQweHG14EhKWC44KmaiwDQQEBwceQ">> //     var ma
Google Map 实例
glaciercool的专栏
08-19 1180
<br /><html><br />     <head><br />         <meta content="text/html; charset=utf-8" http-equiv="content-type"><br />         <link href="style.css" type="text/css" rel="stylesheet"><br />         <script src="http://ditu.google.com/maps?file=api&v
Flutter Google Map 示例项目教程
gitblog_00914的博客
09-02 541
Flutter Google Map 示例项目教程 1. 项目的目录结构及介绍 Flutter-google-map-example/ ├── android/ ├── assets/ │ └── images/ ├── ios/ ├── lib/ │ ├── main.dart │ ├── map_screen.dart │ └── constants.dart ├── test...
swagger map示例_Android Google Map Street View示例
从零开始的教程世界
07-11 506
swagger map示例In this tutorial, we’ll be implementing the StreetView feature of Google Maps in our Android Application. 在本教程中，我们将在Android应用程序中实现Google Maps的StreetView功能。 To integrate Google Maps API i...
Google Map API 代码示例
06-26 108
转载于:https://www.cnblogs.com/MyFlora/p/3156761.html
VB.NET不使用API加载Google Map示例
08-27
本示例探讨了如何在VB.NET应用中不依赖Google Maps API直接加载地图。这通常是为了避免API调用限制、减少对网络资源的依赖或者进行离线地图展示。以下是一些关键知识点和实现步骤： 1. **HTML嵌入方法**： 不使用...
vue-googlemap-example:npm vue2-google-map软件包示例
04-16
vue-googlemap-example01 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
探索Google Map示例源码与工具应用
3. Google Map API的使用示例：在给出的文件中，文件名称为"google map示例"，虽然具体的示例内容未给出，但可以预知该示例展示了如何使用Google Map API。这可能包括初始化地图、添加标记点、绘制路径、绑定事件...
百度(高德、GG歌)离线地图开发环境搭建【离线地图开发源代码】
热门推荐
bigemap的博客
01-25 1万+
1.说明 离线地图开发环境支持谷歌地图、百度地图、高德地图等等所有常用地图类型，支持在局域网内的地图部署、二次开发。 2.实现 第一步：下载安装离线地图开发环境 ​下载地址： BIEGMAP离线地图服务器（开发版) 下载安装好之后，启动软件，如下图所示： ①如果你的电脑连接到网络，这里可以直接点击【进入】；如果未能链接网络，请插上离线地图加密锁点击【进入】...
多功能仿真软件Multisim中MC1496信号乘法混合电路仿真资源
最新发布
11-27
本资源包含了一个使用Multisim仿真软件实现的MC1496信号乘法混合电路的工程文件。此电路是根据网络上的电路图自主绘制的，旨在帮助电子爱好者、工程师及学生更好地理解和学习信号乘法混合电路的原理及其在实际应用中的表现。 文件描述 文件名：multisim仿真MC1496实现的信号乘法混合.rar 内容：Multisim仿真工程文件，包含电路图和相关仿真设置。 注意事项 本资源为仿真文件，运行前请确保已安装Multisim仿真软件。 电路图仅供参考，如有任何疑问或需要帮助，请根据个人学习途径寻求解答。 本资源中所包含的电路图是根据网上资料自主绘制，如有不准确之处，请以实际应用为准。 使用说明 解压下载的文件至指定文件夹。 打开Multisim软件，选择“打开工程”功能，找到并打开解压后的工程文件。 根据个人需求进行仿真实验或修改电路参数。
基于PyQt5的Python图书管理系统开发实践
11-27
采用PyQt5框架与Python编程语言构建图书信息管理平台 本项目基于Python编程环境，结合PyQt5图形界面开发库，设计实现了一套完整的图书信息管理解决方案。该系统主要面向图书馆、书店等机构的日常运营需求，通过模块化设计实现了图书信息的标准化管理流程。 系统架构采用典型的三层设计模式，包含数据存储层、业务逻辑层和用户界面层。数据持久化方案支持SQLite轻量级数据库与MySQL企业级数据库的双重配置选项，通过统一的数据库操作接口实现数据存取隔离。在数据建模方面，设计了包含图书基本信息、读者档案、借阅记录等核心数据实体，各实体间通过主外键约束建立关联关系。 核心功能模块包含六大子系统： 1. 图书编目管理：支持国际标准书号、中国图书馆分类法等专业元数据的规范化著录，提供批量导入与单条录入两种数据采集方式 2. 库存动态监控：实时追踪在架数量、借出状态、预约队列等流通指标，设置库存预警阈值自动提醒补货 3. 读者服务管理：建立完整的读者信用评价体系，记录借阅历史与违规行为，实施差异化借阅权限管理 4. 流通业务处理：涵盖借书登记、归还处理、续借申请、逾期计算等标准业务流程，支持射频识别技术设备集成 5. 统计报表生成：按日/月/年周期自动生成流通统计、热门图书排行、读者活跃度等多维度分析图表 6. 系统维护配置：提供用户权限分级管理、数据备份恢复、操作日志审计等管理功能 在技术实现层面，界面设计遵循Material Design设计规范，采用QSS样式表实现视觉定制化。通过信号槽机制实现前后端数据双向绑定，运用多线程处理技术保障界面响应流畅度。数据验证机制包含前端格式校验与后端业务规则双重保障，关键操作均设有二次确认流程。 该系统适用于中小型图书管理场景，通过可扩展的插件架构支持功能模块的灵活组合。开发过程中特别注重代码的可维护性，采用面向对象编程范式实现高内聚低耦合的组件设计，为后续功能迭代奠定技术基础。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
理工科研究生学习课程-最优化理论与方法
11-27
文档主要为最优化理论与方法学习过程中的笔记记录，包含各类题型，牛顿法，最速下降法，单纯形法，动态规划法，大M法等
【硕士论文完美复现】【价格型需求响应】基于需求侧响应的配电网供电能力综合评估（Python代码实现）
11-27
【硕士论文完美复现】【价格型需求响应】基于需求侧响应的配电网供电能力综合评估（Python代码实现）内容概要：本文档是一份关于“基于需求侧响应的配电网供电能力综合评估”的硕士论文复现资源，重点围绕价格型需求响应展开，结合Python代码实现，对配电网在考虑用户侧响应情况下的供电能力进行建模与评估。内容涵盖电力系统中需求响应机制的设计、负荷调整模型的构建、优化算法的应用以及供电能力的量化分析，旨在通过仿真手段提升配电网运行效率与可靠性，并验证所提方法的有效性。文档还附带完整的代码资源链接，便于读者复现实验结果。; 适合人群：具备一定电力系统基础知识和Python编程能力的研究生、科研人员及从事智能电网相关工作的技术人员。; 使用场景及目标：①用于学习和复现硕士论文中的需求响应模型与供电能力评估方法；②支撑科研项目中对配电网灵活性与用户侧互动机制的研究；③为微电网、虚拟电厂等领域的优化调度提供技术参考。; 阅读建议：建议结合文中提供的网盘资源下载完整代码与数据，边运行代码边理解模型细节，重点关注需求响应建模与供电能力计算的实现逻辑，同时可扩展应用于其他优化场景。
经典 AJAX 实现简单 Google Map 示例附源码
在本案例中，开发者通过运用AJAX技术，结合Google Maps API，实现了一个简单的Google Map程序。该程序允许用户在网页上查看地图，并可能包含了某些交互功能，如搜索特定地点、标记地点、路径规划等。程序的具体实现...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值