Google Map ApI 的简单运用（二）

最新推荐文章于 2024-07-14 10:34:53 发布
最新推荐文章于 2024-07-14 10:34:53 发布
阅读量1.4k 收藏
点赞数
文章标签： google api stylesheet function html class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mypurse/article/details/6512535
版权

 下面的是Google Map地图异步加载 （通过js）和 通过查询获取后台经纬度数据  并且点与点之间用折线链接显示。

参考的是Google Map ApI 官方网址

这是我的mapSearch.js文件，这中间运用了DWR，JQuery。

$().ready(function(){   

     loadScript();

     $('#empNo').val(''); 

});

      

      

var map;

var markerOptions;

 

 function load() {   

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

      if (GBrowserIsCompatible()) {      

       // map.addControl(new GSmallMapControl());//却掉了恢复和滑块     

        map.addControl(new GLargeMapControl());//大的缩略图控件    

        map.addControl(new GMapTypeControl());//地图模式

        map.addControl(new GOverviewMapControl());//右下角缩略图

        //map.addControl(new GScaleControl());//地图比例尺

        map.removeMapType(G_HYBRID_MAP);//去除混合地图模式 

        map.enableScrollWheelZoom(); //开启滚轮伸缩效果－－鼠标滚轮向前滚放大地图，反之缩小      

        //map.setCenter(new GLatLng(39.9693, 116.4170), 13);

        map.setCenter(new GLatLng(31.14,121.29), 13);

     } 

     else 

     { 

         alert('你使用的浏览器不支持 Google Map!');     

     } 

  }  

  //判断输入的工号是否存在

 function checkempNo (){ 

   var isExist=dbwtool.callDWRSync('MapSearchDWR.checkempNo',[$('#empNo').val()]);

   if(isExist==false){

     alert("该业务员工号不存在存在，请重新输入！");

     $('#empNo').val('');        

    }

 }

 

//创建有弹出信息框窗口的  Marker

function createMarker(point, content) {

  var blueIcon = new GIcon(G_DEFAULT_ICON);

  //blueIcon.image = "http://localhost:8080/hs/image/admin/btn_save.gif";//更换Marker图标

  markerOptions = { icon:blueIcon };  

  var marker = new GMarker(point,markerOptions);

  var html = content ;

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

    marker.openInfoWindowHtml(html);

  });

 

  return marker;

}

//查询操作

function doSearch(){

  var empNo=$('#empNo').val(); 

  if(empNo!=""){

    var o = dbwtool.callDWRBusiness('MapSearchDWR.getLatitudelongitudes',[empNo]);

    load();//作用是在查询第二次，把前一次的加载的标记清掉 归为第一次加载的地图，这样地图不会 重叠

    if(o){     

        var points=[];//定义一个 数组大小不确定      

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

              var latitude=parseFloat(o[i].latitude);

              var longitude=parseFloat(o[i].longitude);            

              var point=new GLatLng(latitude,longitude);

              points[i]=point;

              var content="客户姓名:"+o[i].customerName+"<br>客户地址:"+o[i].address+"</br>"+"<br>客户电话:"+o[i].phone+"</br>"+"</br>"+"<br>购买数量电话:"+o[i].buyAmount+"</br>";                    

              var marker = createMarker(point, content);

              map.addOverlay(marker);         

           }     

          

       //var polyline = new GPolyline([points[0],points[1],points[2]], "#ff0000", 8);

       var polyline = new GPolyline(points, "#ff0000", 8);

       map.panTo(points[0]);//这一句很重要，作用是移动地图中心位置

       map.addOverlay(polyline);  

       }

       else{

         alert("没有数据！");

         $('#empNo').val(''); 

          return false;

          }

    } 

  else{

   alert("请输入业务员工号！");

   return false;

  }

}

//下面该方法是异步夹杂Google  Map 注意  两个参数  asyns，callback

 function loadScript() {

      var script = document.createElement("script");

      script.type = "text/javascript";

      script.src = "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAiWserKTZU9nXfUSx4Ei4RRSY6Rp_dtTyQN4GkMrKIoAukNIPFxRDWpNdSMTrO1knJiSNHRXJdBcZSA&async=2&callback=load";

      document.body.appendChild(script);

    }

 

 我的mapSearch.jsp文件：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@include file="../common/comtop.jsp"%>

<%@taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE html PUBLIC "-//W 3C //DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

       <title>地图——地图查询</title>           

       <link rel="stylesheet" type="text/css" href="<%=ctxPath%>/themes/default/dtree.css" />    

       <link rel="stylesheet" type="text/css" href="<%=ctxPath%>/themes/default/tooltip.css" />

       <script type="text/javascript" src="<%=ctxPath%>/js/common/dbwtool.js"></script>

       <script type="text/javascript" src="<%=ctxPath%>/js/common/dtree_c.js"></script>

       <script type="text/javascript" src="<%=ctxPath%>/js/map/mapSearch.js"></script>

       <script type='text/javascript' src="<%=ctxPath%>/dwr/interface/MapSearchDWR.js"></script>    

       <script type='text/javascript' src="<%=ctxPath%>/dwr/engine.js"></script>       

       <script type="text/javascript">

        </script>

    </head>

<body  onload="load()" onunload="GUnload()">

<div class="titleBar">

    <span style="float: left;">地图-地图查询</span><br/>

    <span style="float: right"></span>

</div>

<s:form id="mainForm" name="mainForm" action="mapSearch" namespace="/map" method="post">

<div class="panel" id="search">

    <table class="panel">

           <thead>                  

              <tr>   

                    <td>业务员工号 <input type="text" id="empNo" onblur="checkempNo()" ></td> 

                    <td><a href="#" onClick="doSearch();return false;"><img src='<%=ctxPath%>/image/admin/btn_search.gif'/>查询</a></td>

              </tr> 

           </thead>

    </table>  

</div>

<div id="map" align="center" style="width: 1300px; height: 350px">       

</div>

</s:form>    

</body>   

</html>         

spaceman
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
google map api v2开发实例
08-24
通过这个“GoogleMapsAPIV2开发实例”，初学者能够逐步掌握如何运用谷歌地图API V2构建功能丰富的地图应用，包括但不限于地图展示、地点搜索、路线规划、用户定位等。实践中遇到问题时，可以参考官方文档、社区论坛...
Google Map API基本源码
02-27
Google Map API是一个强大的工具，它允许开发者在网页或应用程序中集成地图功能，提供导航、定位、地理编码等服务。...通过研究这些源码，开发者能够更好地掌握如何在自己的项目中灵活运用Google Map API。
google map api ---类GMap2
starting
08-11 118
class GMap2 对类 GMap2 实例化以创建地图。这是 API 中的中心类。其他的都是辅助类。 构造函数 构造函数 描述 GMap2(container, opts?) 在给定的 HTML 容器中创建新的地图，该容器通常是一个 DIV 元素。如果可选参数 opts.mapTypes 中没有给出地图类型集，则使用默认的集合 G_DEFAULT_MAP_TYPES。如果可...
Google Map开发系列（四）——使用JavaScript创建地图步骤详解
ForEvErNoME专栏
06-30 3262
一段经过精简的代码： <!-- var map = new GMap2(document.getElementById("mapContainer")); map.setCenter(new GLatLng(33.0, 106.0), 3);// -->  新建一个空白的文本文件，把上面这段代码copy过去，不要改变代码的任何顺序，然后
谷歌地图 API 的 5 个强大替代品（国外产品）
YFCMS博客
11-05 2599
谷歌地图因其全球地理定位服务而广受欢迎。他们庞大的地理特征、小型企业和全球街道图像数据库是无与伦比的——这就是为什么谷歌地图 API多年来一直是开发人员的首选。 然而，在 2018 年 7 月，谷歌大幅提高了地图 API的费率。以前，您每天最多可以制作 25,000 个免费地图显示，随后每 1,000 个收费 0.50 美元。自 7 月 16 日起，您每月最多可免费显示 28,000 张地图，随后每 1,000 张的费用为 7.00 美元（价格上涨14 倍！） 顺便说一下，这 28,000 次免费...
Google map API Study(I)
南山南
07-19 381
使用google地图关于地图运用API许多，本姑娘就开始了google地图的学习之旅。<html> <head> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&sensor=false"> </script>
Google Map API学习记录
407509797专栏
10-11 593
去年年底用Google Map API做了一个GIS系统，以下简称GMA,初看GMA的时候感觉写GMA工程师确实挺强的，把Javascript运用的如火纯清，不愧是全球顶尖的公司； 下面我就把我平时遇到的问题，总结一下，顺便做个记录备忘一下，如果在这能发现解决你问题的解决方案，
谷歌地图api根据经纬度查询地名php,在线查询经纬度 google map查询地名返回经纬度 geocode geocoder的完整实例 代码下载...
weixin_39607423的博客
03-21 698
说明：地址解析就是将地址(如：贵州省贵阳市)转换为地理坐标(如经度：106.71，纬度：26.57)的过程。这是运用google map api开发的地图应用，geocode geocoder的完整实例，实现鼠标经过提示经纬度，自动填充地名地点名称，输入完成后可直接点击enter键进行解析，地理位置不准确，可以拖动重新解析，解析后显示完整经纬度信息，轻轻松松将地理位置转换为经纬度，希望能帮助各位...
每周交流会记录 -- Css Sprite，Sitemap， Google Map API
diaoyan8513的博客
01-14 117
踏入10年，我继续我的实习生活，每周只上三天的班比较不错，但是每天的工作是十分紧张的。幸运的是，这周开始我们每周有2个小时的交流时间，大家互相分享自己看到有意义而且与工作相关的知识，互相提高。这个习惯以前在电信也想开展，可惜最后大家都很懒没有坚持下来，不管怎样，昨天总算开始了第一次交流，感觉还不错，这里做一个简短的记录。 CSS Sprite 推荐文章 概...
如何将经纬度利用Google Map API显示C# VS2005 Sample Code
weixin_33747129的博客
06-27 122
原文 如何将经纬度利用Google Map API显示C# VS2005 Sample Code 日前写了一篇如何用GPS抓取目前所在,并回传至资料库储存,这篇将会利用这些回报的资料,将它显示在地图上,这个做法有两种,最简单的就是直接传值到Google Maps上.   举例来说,当我们知道经纬度后,只要将数据套到以下网址即可. http://maps.google.com/maps...
关于Vue项目导入谷歌翻译api
qq_38366946的博客
10-14 2494
index.html <script src="<%= BASE_URL %>googleTrans/js/element.js?cb=googleTranslateElementInit"></script> <script> setTimeout(()=>{ // eslint-disable-next-line no-undef new google.translate.TranslateElement(
google map api 及范例
08-08
《google-map-api-example-chm-document.chm》可能包含了丰富的示例代码，涵盖了以上各种功能的实际运用，对于初学者来说是很好的学习资源。 10. **API版本更新** 谷歌地图API会定期更新，以增加新特性、优化性能...
Google 地图API Map()构造器详解
09-01
然后，我们使用`Map()`构造器创建了一个新的地图，并将其插入到ID为`googleMap`的`<div>`元素中。 `MapOptions`对象可以包含许多其他选项，例如： - `streetView`: 指定街景视图。 - `disableDefaultUI`: 是否禁用...
android写的google map api 应用.zip
12-16
本应用示例“android写的google map api 应用”是一个基于Android的Google Maps API的实践项目，可以帮助开发者更好地理解和运用这个API。 在源码“MyMap”中，我们可以学习以下几个关键知识点： 1. **集成Google ...
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2672
title>充电效果
html 关闭信息窗口
最新发布
cuisidong1997的博客
07-14 107
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
使用linux的mail命令发送html格式的邮件
zh515858237的专栏
07-10 426
2、然后修改/etc/mail.rc，在文件末尾增加以下内容，指定邮箱和授权码。1、关闭本机的sendmail服务或者postfix服务。3、然后通过命令来发送邮件。3、授权码的获取方式。
初识HTML
Dxito_的博客
07-09 939
⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.• type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等。在HTML中,段落,换⾏符,空格都会失效,如果需要分成段落,需要使⽤专⻔的标签，p表示一个段落。• border表⽰边框.1表⽰有边框(数字越⼤,边框越粗)," "表⽰没边框.
googlemap api v3
08-18
Google Map API V3是一种用于在Web应用程序中嵌入和操作Google地图的编程接口。它提供了一组丰富的功能和工具，可以帮助开发者在自己的网站或应用中实现地图和位置相关功能。 使用Google Map API V3，开发者可以轻松地在网页上显示一个互动的地图，包括地图图块、标记、信息窗口、图形和覆盖物等元素。开发者还可以通过调用API提供的方法，获取地图的坐标和视图信息，以及监听用户交互事件。 除了基本的地图显示功能外，Google Map API V3还提供了许多高级功能。例如，开发者可以使用地图的几何库进行位置计算和空间分析，可以实现地图上的地理编码和逆地理编码等操作。API还支持在地图上绘制路径和多边形，并可以使用地图上的各种工具控制地图的交互和视图。 Google Map API V3还与其他Google服务集成得很好。例如，开发者可以通过API调用Google Places服务，实现根据关键字搜索地点和显示地点详细信息的功能。还可以使用API调用Google Street View服务，在地图上显示街景图像。 总而言之，Google Map API V3为开发者提供了一个强大而灵活的工具，可以方便地在自己的网站或应用中集成和操作Google地图，实现丰富的地图和位置相关功能。无论是创建一个简单的地图显示页面，还是实现复杂的地理应用，Google Map API V3都是一个很好的选择。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值