Google Map API V3开发（1）

Google Map API V3开发（2）

Google Map API V3开发（3）

Google Map API V3开发（4）

Google Map API V3开发（5）

Google Map API V3开发（6） 代码

6 Google Maps 事件

每个 Maps API 对象均可导出大量已命名的事件。如果程序想要实现某些事件，则会为这些事件注册 Javascript 事件监听器，并在 google.maps.event 命名空间中注册addListener() 事件处理程序，以便在接收这些事件后执行相应代码。

google.maps.Marker 对象可以监听一些用户事件，例如：

'click'

'dblclick'

'mouseup'

'mousedown'

'mouseover'

'mouseout‘

使用方法：

Var listener = google.maps.event.addListener(marker, ‘click’, function())

google.maps.event.removeListener(listener)

监听 DOM 事件

Google Maps JavaScript API 事件模型会自行创建并管理自定义事件。不过，浏览器内的DOM（文档对象模型）也会根据所使用的特定浏览器事件模型自行创建并分派事件。如果您想要捕获并响应这些事件，可以使用 Maps API 提供的 addDomListener() 静态方法来监听并绑定到这些 DOM 事件。

google.maps.event.addDomListener(window, 'load', initialize);

代替：

<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

7 控件

Maps API 带有一部分可在地图中使用的内置控件：

?    缩放控件，显示滑块（针对大地图）或“+/-”小按钮（针对小地图），用于控制地图的缩放等级。在非触摸的设备上，该控件默认显示在地图的左上角，而在触摸设备上则显示在左下角。

?    平移控件，显示用于平移地图的按钮。在非触摸的设备上，该控件默认显示在地图的左上角。您还可以使用平移控件对图像进行 45° 旋转

?    比例控件，用于显示地图比例元素。默认情况下，系统不会启用此控件。

?    MapType 控件，可让用户在不同的地图类型（例如 ROADMAP 和 SATELLITE）之间进行切换。该控件默认显示在地图的右上角。

?    街景视图控件包含一个街景小人图标，将该图标拖动到地图上即可启用街景视图。该控件默认显示在地图的左上角。

?    旋转控件包含一个较小的圆形图标，可让您旋转包含斜面图像的地图。该控件默认显示在地图的左上角。

?    总览图控件会显示一个简略的总览图，用于在更广阔区域内反映当前的地图视口。该控件默认以折叠状态显示在地图的右下角。

8 叠加层

叠加层是地图上与纬度/经度坐标绑定的对象，会随您拖动或缩放地图而移动。叠加层表示的是“添加”到地图中以标明点、线、区域或对象集合的对象

Maps API 包含以下几种叠加层：

?    地图上的单个位置是使用标记显示的。标记有时可显示自定义的图标图片，这种情况下标记通常被称为“图标”。标记和图标是 Marker 类型的对象。

?    地图上的线是使用折线（表示一系列按顺序排列的位置）显示的。线是 Polyline 类型的对象。

?    地图上的不规则形状区域是使用多边形（类似于折线）显示的。与折线相同的是，多边形也是由一系列按顺序排列的位置构成的；不同的是，多边形定义的是封闭区域。

?    地图图层可使用叠加层地图类型显示。您可以通过创建自定义地图类型来创建自己的图块集，自定义地图类型可取代基本地图图块集，或作为叠加层显示在现有基本地图图块集之上。

?    信息窗口也是特殊类型的叠加层，用于在指定地图位置上方的弹出式气泡框内显示内容（通常是文字或图片）。

?    您还可以实现自己的自定义叠加层。这些自定义叠加层可实现 OverlayView 接口。

绘图库

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

<head runat="server">

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript" src='http://maps.googleapis.com/maps/api/js?v=3&sensor=true&language=hk&libraries=drawing'></script>

    <script type="text/javascript">

            function initialize() {

                var myOptions = {

                    zoom: 4,

                    center: new google.maps.LatLng(33.174342, 116.147461),

                    mapTypeId: google.maps.MapTypeId.ROADMAP,

                    scaleControl: true,

                    scaleControlOptions: {

                        position: google.maps.ControlPosition.LEFT_BOTTOM

                    }

                }

                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                var drawingManager = new google.maps.drawing.DrawingManager({

                    drawingControl: true,

                    drawingControlOptions: {

      position: google.maps.ControlPosition.TOP_CENTER,

      drawingModes: [

        google.maps.drawing.OverlayType.MARKER,

        google.maps.drawing.OverlayType.CIRCLE,

        google.maps.drawing.OverlayType.POLYGON,

        google.maps.drawing.OverlayType.POLYLINE,

        google.maps.drawing.OverlayType.RECTANGLE

      ]

    },

    markerOptions: {

      icon: 'http://maps.google.com/mapfiles/marker_green.png'

    },

    circleOptions: {

      fillColor: '#ffff00',

      fillOpacity: 1,

      strokeWeight: 5,

      clickable: false,

      editable: true,

      zIndex: 1

    }

                });

                drawingManager.setMap(map);

                //var sPointArray = '';

                //google.maps.event.addListener(drawingManager, 'polylinecomplete', function (polyline) {

                    //var latlngArray = (polyline.getPath().getArray());

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

                       // var point = latlngArray[i];

                       // if (sPointArray == '') {

                           // sPointArray = parseFloat(Number(point.lat())).toFixed(4) + "," + parseFloat(Number(point.lng())).toFixed(4);

                        //} //四位小数足够了

                        //else {

                          //  sPointArray = sPointArray + ";" + parseFloat(Number(point.lat())).toFixed(4) + "," + parseFloat(Number(point.lng())).toFixed(4);

                        //}

                   // }

                    //alert(sPointArray);

                //});

            }

            google.maps.event.addDomListener(window, 'load', initialize);

    </script>

    <title></title>

</head>

<body>

<div class="container">

    <form id="form1" action="" class="form-horizontal"  role="form" runat="server">

    <div id="map_canvas" style="width: 800px; height: 480px; margin-top:15px;"></div>

    </form>

</body>

</div>

</html>

Google Map API V3开发（3）的更多相关文章

  1. Google Map API V3开发（1）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  2. Google Map API V3开发（2）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  3. Google Map API V3开发（4）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  4. Google Map API V3开发（5）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  5. Google Map API V3开发（6） 代码

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  6. Google map API V3

    本文主要总结Google map API V3使用中最简单也是最常见的一些操作以及相关概念,如果需要更加详细的信息,请直接阅读Google提供的关于map的文档. google map api v3文 ...

  7. Google Map API V3调用arcgis发布的瓦片地图服务

    由于最近项目需要用到CAD制作的地图,但之前一直使用的是用谷歌离线瓦片地图的方式,怎么样把CAD图像地图一样有缩放,移动的功能放到网页显示成了难题, 原先的谷歌地图的代码难道就不能用了?重新写一套代码 ...

  8. Google 地图 API V3 针对移动设备进行开发

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  9. 如何使用Google Map API开发Android地图应用

    两年前开发过的GoogleMap已经大变样,最近有项目要用到GoogleMap,重新来配置Android GoogleMap开发环境,还真是踩了不少坑. 一.下载Android SDK Manager ...

随机推荐

  1. Neo4j图数据库管理系统开发笔记之一：Neo4j Java 工具包

    1 应用开发概述 基于数据传输效率以及接口自定义等特殊性需求,我们暂时放弃使用Neo4j服务器版本,而是在Neo4j嵌入式版本的基础上进行一些封装性的开发.封装的重点,是解决Neo4j嵌入式版本Emb ...

  2. 算法: 斐波那契数列C/C++实现

    斐波那契数列: 1,1,2,3,5,8,13,21,34,....     //求斐波那契数列第n项的值 //1,1,2,3,5,8,13,21,34... //1.递归: //缺点:当n过大时,递归 ...

  3. JS导出PDF插件（支持中文、图片使用路径）

    在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题.它的效果可以先到http://pdfmake.org/playgroun ...

  4. 将Apache手动安装成Windows的服务

    将Apache手动安装成Windows的服务 可以选择在安装Apache时自动将其安装为一个服务.如果选择"for all users",那么Apache将会被安装为服务. 如果选 ...

  5. 编译软件基础知识(2/2) via LinuxSir

    首先说下/etc/ld.so.conf: 这个文件记录了编译时使用的动态链接库的路径. 默认情况下,编译器只会使用/lib和/usr/lib这两个目录下的库文件 如果你安装了某些库,比如在安装gtk+ ...

  6. Mysql日志解析

    修改Mysql配置 Mysql配置地址为: C:\Program Files (x86)\MySQL\MySQL Server 5.5 如果无法修改可以把my.ini拷贝出来,修改完后,再拷贝回去! ...

  7. Excel自文本导入内容时如何做到单元格内换行

    前言:今天在处理数据的时候,在数据库中用到了\n换行符号,目的是在同表格内做到数据多行显示,比如  字段名1  字段名2  字段名3  1 数据一行 数据二行 数据三行 例子是在sql查询后的结果  ...

  8. MMORPG大型游戏设计与开发（服务器 AI 基础接口）

    一个模块都往往需要统一的接口支持,特别是对于非常大型的模块,基础结构的统一性非常重要,它往往决定了其扩展对象的通用性.昨天说了AI的基本概述以及组成,作为与场景模块中核心一样重要的地位,基础部分的设计 ...

  9. MATLAB的一些基础知识

    1．已知a1=sin(sym(pi/4)+exp(sym(0.7)+sym(pi/3)))产生精准符号数字,请回答:以下产生的各种符号数哪些是精准的?若不精准,误差又是多少?能说出产生误差的原因吗? ...

  10. 【转】【C#】迭代器

    迭代器模式是设计模式中行为模式(behavioral pattern)的一个例子,他是一种简化对象间通讯的模式,也是一种非常容易理解和使用的模式.简单来说,迭代器模式使得你能够获取到序列中的所有元素而 ...