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,如需转载请自行联系原作者





相关文章
|
1月前
|
存储 JavaScript 前端开发
详解js跨页面传参以及API的解释
详解js跨页面传参以及API的解释
32 0
|
2月前
|
存储 JSON 移动开发
详解js跨页面传参以及API的解释
详解js跨页面传参以及API的解释
|
4月前
|
编解码 前端开发 API
Spartacus 产品明细页面的 API 设计
Spartacus 产品明细页面的 API 设计
|
8月前
|
开发框架 JSON 前端开发
【C#】.net core2.1,自定义全局类对API接口和视图页面产生的异常统一处理
在开发一个网站项目时,异常处理和过滤功能是最基础的模块 本篇文章就来讲讲,如何自定义全局异常类来统一处理
154 0
|
8月前
|
JSON 前端开发 JavaScript
【前端】使用jQuery实现一个简单的在线页面或API接口请求功能
对于测试人员来说,借助一些测试工具非常的重要,像postman等工具,很方便就能发起api接口的请求和测试 但是,对于开发人员来说,有时候未必一开始就使用这些工具,有可能电脑原因未安装到这些工具或者太麻烦 基于这样一个情况,本篇文章就来简单实现下在线页面发起http的get或post请求的功能 作者:全栈小5 链接:https://juejin.cn/post/7107132057263800327 来源:稀土掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
308 0
|
10月前
|
前端开发 JavaScript API
几种不常用Web API(振动、重力感应、联网状态、系统电量信息、页面可见性、canvas转base64、监听屏幕旋转、元素全屏显示)
navigator对象中有一些不常用的API,以下主要介绍vibrate振动,deviceorientation重力感应,online联网状态,getBattery系统电量信息,visibilitychange页面可见性,toDataURL(canvas转base64),orientationchange监听屏幕旋转和fullScreen元素全屏显示。
几种不常用Web API(振动、重力感应、联网状态、系统电量信息、页面可见性、canvas转base64、监听屏幕旋转、元素全屏显示)
|
存储 JavaScript 前端开发
vue-admin-chart实现管理后台登陆页面,axios请求restful接口,Composition API风格
vue-admin-chart管理后台登陆界面是基于Vue3.2 vue-cli5 vue-router4 ElementPlus2.2 Pinia2.0状态管理存储 axios网络请求等搭建,采用TS(TypeScript)脚本语言,以Composition api风格编写,采用axios请求远程Restful API接口调试。
vue-admin-chart实现管理后台登陆页面,axios请求restful接口,Composition API风格
|
API 网络架构
SAP 电商云 Spartacus 产品明细页面的 OCC API 是如何被触发的
SAP 电商云 Spartacus 产品明细页面的 OCC API 是如何被触发的
SAP 电商云 Spartacus 产品明细页面的 OCC API 是如何被触发的
SAP Commerce Cloud WCMS 里的 home 页面和 SAP Spartacus Page API 返回的数据比较
SAP Commerce Cloud WCMS 里的 home 页面和 SAP Spartacus Page API 返回的数据比较
SAP Commerce Cloud WCMS 里的 home 页面和 SAP Spartacus Page API 返回的数据比较
SAP Spartacus delivery mode页面两个一模一样的cart API请求
SAP Spartacus delivery mode页面两个一模一样的cart API请求
SAP Spartacus delivery mode页面两个一模一样的cart API请求
相关产品
云迁移中心
推荐文章
更多