调用谷歌地图api接口实现地图显示

最新推荐文章于 2024-04-17 14:29:20 发布
最新推荐文章于 2024-04-17 14:29:20 发布
阅读量5.2k 收藏 1
点赞数
分类专栏： jsp开发综合 文章标签： api xmlhttprequest function firefox null url
蔡蔡专属
本文链接：https://blog.csdn.net/caisenbin2009/article/details/7394998
版权

调用谷歌地图api接口实现地图显示

<%@ page contentType="text/html;charset=gb2312" language="java" import="java.sql.*"errorPage="" %>

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />

<metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 

<META HTTP-EQUIV="Pragma"CONTENT="no-cache" >

<METAHTTP-EQUIV="Cache-Control" CONTENT="no-cache" >

<meta http-equiv="expires"content="0" > 

<title>热点地图显示页面</title>

 

<script charset="utf-8"type="text/javascript"src='http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAA8isncdaDTmdPzP31-PpKtBRjqOEOdO7Uti1UxHh75vPMkzVFhhTF63QjSTUWM9vWVd3bm0e2vIqGmg'></script>

 

<scripttype="text/javascript">

 

/*function loadXMLDoc(){

       varxmlhttp;

       if(window.XMLHttpRequest){

              xmlhttp=newXMLHttpRequest();

       }else{

              xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

       }

       returnxmlhttp;

}*/

 

/*function loadXMLDoc(){

       varxmlhttp=null;

       try

    {

   // Firefox, Opera 8.0+, Safari

   xmlHttp=new XMLHttpRequest();

    }

 catch (e)

    {

   // Internet Explorer

   try

     {

     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

     }

   catch (e)

     {

     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

     }

    }

 return xmlHttp;

}*/

 

function loadXMLDoc() {

  //针对FireFox,Mozillar,Opera,Safari,IE7,IE8

 //alert(window.XMLHttpRequest);

 if(window.XMLHttpRequest)

　　    return new XMLHttpRequest();

  //针对IE5，IE5.5，IE6

 else if (window.ActiveXObject){ 

       //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个JS数组中。

      var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];

      for(var i = 0; i<activexName.length; i++){

          //取出一个控件名进行创建，如果成功就终止循环

          try{

              return new ActiveXObject(activexName[i]);

              break;

          }catch(e){

          return null;

          }

      }

      }      

  }

 

 

//XMLDcoument加载方法

function createXMLDoc(respon){

       varxmldoc=null;

       try{

              xmldoc=newActiveXObject("Microsoft.XMLDOM");

              xmldoc.async=false;  //同步

              xmldoc.loadXML(respon);

       }catch(e){

              try{

              varparser=new DOMParser();

              xmldoc=parser.parseFromString(respon,"text/xml");

              }catch(e){}

       }

       returnxmldoc;

}

 

 

function initialize() {

 

     if (GBrowserIsCompatible()) {

       var map = new GMap2(document.getElementById("map_wlan"));

       map.setCenter(new GLatLng(39.9081726, 116.3979471),4);

              map.enableScrollWheelZoom();

              //map.addControl(newGLargeMapControl());

              //map.addControl(newGMapTypeControl());

              map.setUIToDefault();

             

              varicon = new GIcon();

       icon.image ="http://labs.google.com/ridefinder/images/mm_20_green.png";

       icon.shadow ="http://labs.google.com/ridefinder/images/mm_20_shadow.png";

       icon.iconSize = new GSize(15, 30);

       icon.shadowSize = new GSize(30, 30);

       icon.iconAnchor = new GPoint(6, 20);

       icon.infoWindowAnchor = new GPoint(5, 10);

             

              varframe=parent.frames.topFrame;

              varcity=frame.document.getElementById("city").value;

              varlat=frame.document.getElementById("lat").value;

              varlng=frame.document.getElementById("lng").value;

              varhotlat=frame.document.getElementById("hotlat").value;

              varhotlng=frame.document.getElementById("hotlng").value;

              vargrade=frame.document.getElementById("grade").value;

              varhotid=frame.document.getElementById("hotid").value;

              varparentid=frame.document.getElementById("parentid").value;

              vartypename=frame.document.getElementById("typename").value;

              varjudge=frame.document.getElementById("judge").value;

              varhotname=frame.document.getElementById("hotname").value;

              varhotaddress=frame.document.getElementById("hotaddress").value

             

              varareaCenter;

             

              if(lat!=null&&lat!="null"&&lat!=""&&grade=="2"&&judge!="judge"){

                     areaCenter=newGLatLng(parseFloat(lat),parseFloat(lng));

                     map.setCenter(areaCenter,7);

              }elseif(lat!=null&&lat!="null"&&lat!=""&&grade=="3"&&judge!="judge"){

                     areaCenter=newGLatLng(parseFloat(lat),parseFloat(lng));

                     map.setCenter(areaCenter,11);

              }elseif(lat!=null&&lat!="null"&&lat!=""&&grade=="4"&&judge!="judge"){

                     areaCenter=newGLatLng(parseFloat(lat),parseFloat(lng));

                     map.setCenter(areaCenter,13);

              }elseif(hotlat!=null&&hotlat!="null"&&hotlat!=""&&hotid!=null&&hotid!="null"&&hotid!=""){

                     areaCenter=newGLatLng(parseFloat(hotlat),parseFloat(hotlng));

                     map.setCenter(areaCenter,17);

              }

             

              varcenterMarker = new GMarker(areaCenter,icon);

              if(hotid!=null&&hotid!="null"&&hotid!=""){

       map.addOverlay(centerMarker);

             

              createMarker(centerMarker,hotid);

              //map.addOverlay(createMarker(centerMarker,hotid));

 

              typename="";

              hotname="";

              hotaddress="";

              frame.document.getElementById("hotid").value="";

              frame.document.getElementById("judge").value="";

              }

             

             

              varloadXml=loadXMLDoc();

             

              varurl="hotlist.jsp?parentid="+parentid+"&grade="+grade;

      

              if(typename!=null&&typename!=""){

                     url+="&typename="+typename;

                    

              }

              if(hotname!=null&&hotname!=""){

                     url+="&hotname="+hotname;

              }

              if(hotaddress!=null&&hotaddress!=""){

                     url+="&hotaddress="+hotaddress;

              }

 

              loadXml.open("GET",url,false);

                       

              loadXml.onreadystatechange=function(){

              if(loadXml.readyState==4&&loadXml.status==200){

                     varxmldoc=createXMLDoc(loadXml.responseText);

                    

                     varhotlists=xmldoc.getElementsByTagName("hotlist");

                    

                     if(parseInt(grade)>2){

                            if(hotlists.length>0){

                                   for(vari=0;i<hotlists.length;i++){

                                          //alert(hotlists[i].getAttribute("hotname"));

                                          varhotCenter=newGLatLng(parseFloat(hotlists[i].getAttribute("lat")),parseFloat(hotlists[i].getAttribute("lng")));

                                         

                                          var marker=new GMarker(hotCenter,icon)

                                      map.addOverlay(createMarker(marker,hotlists[i].getAttribute("id")));

                                          //map.addOverlay(marker);

                                   }

                                   if(typename!=null&&typename!=""){

                                          map.setCenter(hotCenter,12);

                           

                                   }

                                   if(hotname!=null&&hotname!=""){

                                          map.setCenter(hotCenter,12);

                                   }

                                   if(hotaddress!=null&&hotaddress!=""){

                                          map.setCenter(hotCenter,12);

                                   }

                            }

                     }

             

              }

              };

             

              //searchHotCount();

              loadXml.send(null);

             

     }

        

    }

 

function createMarker(marker,id){

       GEvent.addListener(marker,"click",function(){

              setSpecValue(marker,id);

       });

       returnmarker;

}

 

function setSpecValue(marker,id){

       varframe=parent.frames.topFrame;

       varparentid=frame.document.getElementById("parentid").value;

       vargrade=frame.document.getElementById("grade").value;

      

       varloadXml=loadXMLDoc();

       varurl="hotlist.jsp?parentid="+parentid+"&grade="+grade;

      

       if(id!=null&&id!=""){

              url+="&id="+id;    

       }

      

       loadXml.open("GET",url,false);

      

       loadXml.onreadystatechange=function(){

              if(loadXml.readyState==4&&loadXml.status==200){

             

              varxmldoc=createXMLDoc(loadXml.responseText);

             

              varhotvalue=xmldoc.getElementsByTagName("hotlist");

             

              marker.openInfoWindowHtml(

                            "<b>热点id："+hotvalue[0].getAttribute("id")+"</br>"+

                            "<b>热点名称："+hotvalue[0].getAttribute("hotname")+"</br>"+

                            "<b>热点地址："+hotvalue[0].getAttribute("address")+"</br>"+

                            "<b>热点类型："+hotvalue[0].getAttribute("type")+"</br>"+

                            "<b>覆盖范围："+hotvalue[0].getAttribute("area")+"</br>"+

                            //"<b>经度："+hotvalue[0].getAttribute("lat")+"</br>"+

                            //"<b>纬度："+hotvalue[0].getAttribute("lng")+"</br>"+

                            "<b>"

                     );

              }

       };

       loadXml.send(null);

      

       varhotid=frame.document.getElementById("hotid").value="";

      

}

 

 

function hotexport(obj){

       varframe=parent.frames.topFrame;

       varcity=frame.document.getElementById("city").value;

       vargrade=frame.document.getElementById("grade").value;

      

       if(city==""){

              alert("请先选择城市再导出！");

              returnfalse;

       }

       if(city!=""){

              obj.href="excelExport.jsp?city="+city+"&grade="+grade;

       }

}

 

 

function searchHotCount(){

       varframe=parent.frames.topFrame();

       vartotalCount=frame.document.getElementById("totalCount").value;

       varsearchHotCount=document.getElementById("searchHotCount");

       if(totalCount!=""){

       searchHotCount.innerHTML="当前共为您找到"+totalCount+"个符合条件的wlan热点信息！";

       }

      

}

 

</script>

</head>

 

<bodyοnlοad="initialize();onMapLoad();" οnunlοad="GUnload()"style="height:100%">

<table width="100%"border="0" cellspacing="0" cellpadding="0">

 <tr>

   <td>

         <table width="100%" border="0"cellspacing="0" cellpadding="0">

           <tr>

                <td width="220px"align="left">

                </td>

                <td width="500px"align="center">

                </td>

                <td id="searchHotCount"width="150px" align="center">

                </td>

                <td width="85px"align="right">

                  <a href="#"id="hotexport" οnclick="hotexport(this)">热点导出</a>

                </td>

              </tr>

         </table>

       </td>

 </tr>

 <tr>

 <div id="map_wlan" style="width: 100%; height:400px"></div>

 </tr>

</table>

 

</body>

</html>

戈哥
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android调用google地图生成路线图实现代码
09-05
Android程序调用本机google地图并且传递起始和终点位置生成路线图，有需要的朋有可以参考下，或许本文对你有所帮助,好了话不多说，看代码
testQt调用谷歌地图.7z
02-14
Qt调用谷歌地图，通过JS修改代码，调用html网页，可以用于跨平台开发的基础，实现Qt二次开发，来实现地图的调用
使用asp.net调用谷歌地图api示例
01-20
asp.net调用谷歌地图api，需要注意js引入的先后顺序，复制一下代码即可测试 <html xmlns=http://www.w3.org/1999/xhtml> <head> <title></title>//在这里要注意js引入的先后顺序 <link href=Mapjs/jquery.ui.base.css rel=external nofollow rel=stylesheet type=text/css /> <link href=Mapjs/jquery.ui.theme.css rel=external nofollow rel=stylesh
调用google 地图api实例
06-16
调用google api的地图，java Demo，内嵌浏览器，自动根据String类型调用google api找到地址的经纬度坐标，然后添加进地图的Marker中。Marker双击监听写了部分。
web根据地址定位
wdsafmy468619的专栏
05-20 760
直接上代码： html> head> meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> meta http-equiv="Content-Type" content="text/html; charset=gbk" /> title>百度地图title>     s
Google Map API
weixin_34310127的博客
12-23 108
我们在很多网页中都能看到地图导航，比如很多租房网站，都嵌入了地图搜索功能。 其实，实现起来并不难，只需一个Google Map的API。这个小实例，是模仿运输车辆的GPS定位。车辆向服务器发回一个由经度和纬度组成的坐标，就可以实现车辆的实时监控和路线管理等。 先熟悉一下概念：API API: Application Programming Interface, 应用程序编程接口 是一些预先...
Java 调用Google Map Api解析地址，解析经纬度实例
choupumi4274的博客
09-13 437
Java 调用Google Map Api解析地址，解析经纬度实例 使用google地图的反向地址解析功能，提供一个经纬度得到对应地址，或者给出模糊地址，得到经纬度，放在java后台代码中处理，这个使用的是Google的地理编码服务。一般而言数据量不大的情况使用...
利用 Google API 调用谷歌地图 演示1
weixin_30814329的博客
08-06 188
代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head...
GoogleMap——谷歌地图Api的使用
weixin_51506327的博客
12-07 8327
谷歌地图Api的使用，包含地图的加载，标记，信息窗口，获取当前位置，自定义控件等，此外还有在Echarts中使用谷歌地图。
Google Map Api 调用样例程序(Java版)
12-15
Java写的一套Google Map演示程序，供参考!画点，画线!
谷歌地图api调用代码
09-06
谷歌地图js的api 全部的实例调用代码
详解用Python调用百度地图正/逆地理编码API
09-16
主要介绍了详解用Python调用百度地图正/逆地理编码API，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js 实现谷歌地图调用
08-11
js调用谷歌地图的接口，使用js，根据传入的参数调用谷歌地图，进行相对应显示。
Google地图API参考
04-24
google地图的一些对外接口，可以用于相应的开发参考。
Google map API提供的服务体验演示代码-一个大学API实例
12-26
现在，利用google提供的API接口就可以实现这一点。不需要复杂的编程，只需要通过PAI接口调用你需要的资源并添加上自己的信息就可以了。本文介绍了Google Maps API的相关基础知识，并且通过两个地图应用的实际开发，...
google的API接口
05-20
自己写的一个调用google地图的API接口 ,很实用
web配置https
最新发布
飞的博客
04-17 380
Tomcat8 配置：1.单向认证，就是传输的数据加密过了，但是不会校验客户端的来源2.双向认证，如果客户端浏览器没有导入客户端证书，是访问不了web系统的，找不到地址如果只是加密，我感觉单向就行了。如果想要用系统的人没有证书就访问不了系统的话，就采用双向。
微信小程序调用谷歌地图
03-29
微信小程序可以通过调用谷歌地图API来实现地图显示、定位等功能。具体步骤如下： 1. 在谷歌地图开发者平台申请API密钥。 2. 在微信小程序中使用wx.request函数向谷歌地图API接口发送请求，并传递API密钥、经纬度等参数。 3. 解析谷歌地图API返回的数据，将地图显示在小程序界面上。 需要注意的是，谷歌地图API在中国大陆地区可能会受到网络限制，因此需要使用代理服务器或其他解决方案来解决这个问题。同时，谷歌地图API使用需要付费，开发者需要根据实际使用情况选择适合的付费方案。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值