JSP 页面 嵌入 google API 地图

简介:

网站中显示和使用google地图主要是通过javascript调用google api。首先要根据域名到google官网上申请一个key,地址:

http://code.g...s/signup.html

申请完成后,用你的key代替下面代码的key。

 

 
  1. JavaScript 代码复制内容到剪贴板  
  2.       
  3. <script src="http://maps.g...5a3_FEg" type="text/javascript"></script>        
  4. <script src="http://maps.g...5a3_FEg"></script>    

在页面中可以用一个div来显示:

 

 
  1. XML/HTML 代码复制内容到剪贴板  
  2.       
  3. <div id="map" style="height:450px;width:99%;border:solid 1px #00000;display:none"></div> <br>    

下面是加载地图的代码:

 

 
  1. JavaScript 代码复制内容到剪贴板  
  2.       
  3. <script type="text/javascript">        
  4.     //address是要显示的地址      
  5.     function showAddress(address) {        
  6.         document.getElementById("map").style.display="";        
  7.         if (GBrowserIsCompatible()) {             
  8.             var map = new GMap2(document.getElementById("map"));           
  9.             map.addControl(new GSmallMapControl());    //放大缩小            
  10.             map.addControl(new GMapTypeControl());     //地图种类            
  11.             map.enableScrollWheelZoom();    //启用鼠标滚轮            
  12.             var geocoder = new GClientGeocoder();        
  13.             geocoder.getLatLng(address,        
  14.                 function(point) {        
  15.                     if (!point) {        
  16.                         alert(address + " not found");        
  17.                     } else {        
  18.                         map.setCenter(point, 13);        
  19.                         var latln = map.getCenter();        
  20.                         var longitude = latln.lng();        
  21.                         var latitude = latln.lat();        
  22.                         var marker = new GMarker(point);        
  23.                         map.addOverlay(marker);        
  24.                         marker.openInfoWindowHtml("地址:" + address + "<p> </p>" + "经度:"      
  25.                                 + longitude + " 纬度:" + latitude);        
  26.                     }        
  27.                 }        
  28.             );        
  29.        }          
  30.     }        
  31. </script>        
  32. </head>    

如果要创建标记内容以及标记的鼠标事件,可以用下面的代码:

 

 
  1. JavaScript 代码复制内容到剪贴板  
  2.       
  3. <script>        
  4.     function createMarker(point, address, name, qq) {  //创建标记内容及标记的鼠标事件            
  5.         var marker = new GMarker(point);            
  6.         var html = '<div>'+            
  7.                    '<a >姓名:'+ name +'</a><br/>'+            
  8.                    '<a >地址:'+ address +'</a><br/>'+            
  9.                    '<a >QQ:'+ qq +'</a>'+            
  10.                    '</div>';            
  11.         GEvent.addListener(marker, "mouseover"function() {            
  12.              marker.openInfoWindowHtml(html);            
  13.         });            
  14.         GEvent.addListener(marker, "mouseout"function() {            
  15.              marker.closeInfoWindow();            
  16.         });            
  17.         GEvent.addListener(marker, "click"function() {            
  18.              map.setCenter(point, 12);             
  19.         });            
  20.              return marker;            
  21.         }            
  22.         var point = new GLatLng(23.25675,133.33338);     // 设置标记            
  23.         map.addOverlay(createMarker(point,'广州市天河区天河路','小林','452655443'));//加入标记            
  24.              
  25.     }                
  26. </script>        

 



     本文转自06peng 51CTO博客,原文链接:http://blog.51cto.com/06peng/962519,如需转载请自行联系原作者





相关文章
|
9月前
|
Java 数据安全/隐私保护
JavaBean组件<jsp:forward>动作<jsp:param>动作登录页面输入用户名和密码,然后进入检查页面判断是否符合要求,符合要求跳转到成功界面,不符合要求返回登录界面,显示错误信息。
该博客文章通过JavaBean组件和JSP动作元素`<jsp:forward>`与`<jsp:param>`的使用示例,演示了用户登录流程,包括登录信息的提交、验证以及根据验证结果进行的页面跳转。
JavaBean组件<jsp:forward>动作<jsp:param>动作登录页面输入用户名和密码,然后进入检查页面判断是否符合要求,符合要求跳转到成功界面,不符合要求返回登录界面,显示错误信息。
|
7月前
|
Java 应用服务中间件 开发工具
如何使用IDEA创建JSP页面
如何使用IDEA创建JSP页面
676 0
|
1月前
|
数据采集 搜索推荐 API
Python 原生爬虫教程:京东商品列表页面数据API
京东商品列表API是电商大数据分析的重要工具,支持开发者、商家和研究人员获取京东平台商品数据。通过关键词搜索、分类筛选、价格区间等条件,可返回多维度商品信息(如名称、价格、销量等),适用于市场调研与推荐系统开发。本文介绍其功能并提供Python请求示例。接口采用HTTP GET/POST方式,支持分页、排序等功能,满足多样化数据需求。
|
1月前
|
数据采集 JSON 监控
1688 宝贝详情页面API接口系列指南
本文介绍了如何通过 1688.item_get API 获取 1688 平台上商品的详细信息,包括标题、价格、库存等,满足电商数据采集与分析需求。接口需传入商品 ID 等参数,返回 JSON 格式数据。文中提供了 Python 请求示例,使用 requests 库调用 API,开发者需替换实际 URL、API 密钥及商品 ID。代码包含错误处理,便于调试和应用拓展。此方法适用于商品监控、竞品分析等场景。
|
1月前
|
数据采集 API 数据格式
Python 原生爬虫教程:京东商品详情页面数据API
本文介绍京东商品详情API在电商领域的应用价值及功能。该API通过商品ID获取详细信息,如基本信息、价格、库存、描述和用户评价等,支持HTTP请求(GET/POST),返回JSON或XML格式数据。对于商家优化策略、开发者构建应用(如比价网站)以及消费者快速了解商品均有重要意义。研究此API有助于推动电商业务创新与发展。
|
3月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
129 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
9月前
|
存储 Java
JSP中实现留言页面的编写并将留言信息展示出来
这篇文章介绍了如何在JSP中编写留言页面,并通过JavaBean类存储用户留言信息,同时展示了留言信息的展示方法。
JSP中实现留言页面的编写并将留言信息展示出来
|
9月前
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
|
9月前
|
Java
`<jsp:getProperty>`动作和`<jsp:setProperty>`动作的使用在一个静态页面填写图书的基本信息,页面信息提交给其他页面,并且在其页面显示。要去将表单元素的值赋值给Java
该博客文章讲解了JSP中`<jsp:getProperty>`和`<jsp:setProperty>`动作的使用方法,包括它们的语法格式和如何在页面中使用这些动作来获取和设置JavaBean对象的属性值,并通过图书信息的填写和展示示例进行了演示。
`<jsp:getProperty>`动作和`<jsp:setProperty>`动作的使用在一个静态页面填写图书的基本信息,页面信息提交给其他页面,并且在其页面显示。要去将表单元素的值赋值给Java
|
9月前
|
Java
编写一个jsp页面,利用Scriptlet编写一段计算代码,要求用零作为除数,并使用page指令将错误信息显示在另外一个jsp页面,产生的错误信息为“错误,不能用0做除数”
该文章展示了如何创建一个JSP页面,使用Scriptlet编写包含除零操作的计算代码,并配置page指令将错误信息重定向至另一个JSP页面进行显示。
编写一个jsp页面,利用Scriptlet编写一段计算代码,要求用零作为除数,并使用page指令将错误信息显示在另外一个jsp页面,产生的错误信息为“错误,不能用0做除数”

热门文章

最新文章

相关课程

更多