之前一直用百度map，但如果是国外的项目就需要用google地图。由于在国内屏蔽了google地图的服务，因此调用的是一个国内地址(开发用)。这个地址没有用key，语言设置也还是中文的。

//-------------------------------------------------------------------------------------------------

备注：网上很多国内的例子还是用v2的接口，差异还是很大的，v3的接口感觉更加接近js的风格，很多参数都直接是json。

还有关于移动端的原生API和web API区别，我在github上看到一篇文章是这样解释的：原生SDK在移动端会好于web API, 因为web API获取GIS地图数据时，是获取一张张的图片然后在前端进行拼接，而SDK是获取地图数据后在前端重画的，其获取数据会小于web api. 当然我想这个解释话，对于卫星图应该两者无差。

//--------------------------------------------------------------------------------------------------

例子中实现了google几个核心类的主要功能，包括：

1、在初始化时，定位到正向解析地址，这里是定位到自由女神像；

2、在地图中间位置初始化一个可拖拽的图标，绑定拖拽结束时间，结束后通过地址逆解析，弹出一个信息提示框；

3、在地图上绑定鼠标右击事件，每个右击事件新增一个图标；

4、在地图上绑定鼠标双击事件，双击后地图移动到初始位置（中间）；

代码如下：

<!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>

    <title></title>

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

    <script type="text/javascript" src="https://ditu.gdgdocs.org/maps/api/js?v=3.exp&sensor=false"></script>

    <script type="text/javascript">

        $(function() {

            initialize();

        });

        var map = null;

        function initialize() {

            var geocoder = new google.maps.Geocoder();

            //地址正向解析

            geocoder.geocode({

                'address': 'Liberty Island, 10004 New York Harbor'

            }, function(results, status) {

                if (status == google.maps.GeocoderStatus.OK) {

                    var myOptions = {

                        zoom: 12,

                        center: results[0].geometry.location,

                        mapTypeId: google.maps.MapTypeId.ROADMAP,

                    };

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

                    //定义标示

                    var marker = new google.maps.Marker({

                        map: map,

                        position: results[0].geometry.location,

                        title: 'location',

                        draggable: true

                    });

                    marker.setMap(map);

                    google.maps.event.addListener(marker, "dragend", function(event) {

                        //逆地址解析

                        geocoder.geocode({

                            'location': event.latLng

                        }, function(results, status) {

                            if (status == google.maps.GeocoderStatus.OK) {

                                var html = '<div>' + results[0].formatted_address + '</div>';

                                var infowindow = new google.maps.InfoWindow({

                                    content: html

                                });

                                infowindow.open(map, marker);

                            }

                        });

                        //单击后在地图上增加一个标示

                        google.maps.event.addListener(map, 'click', function(event) {

                            var marker1 = new google.maps.Marker({

                                map: map,

                                position: event.latLng

                            });

                            marker1.setMap(map);

                        });

                        //添加双击事件，返回地图中央

                        google.maps.event.addListener(map, "dblclick", function(evvent) {

                            var center = map.getCenter();

                            var lat = center.lat();

                            var lng = center.lng();

                            var latlng = new google.maps.LatLng(lat, lng);

                            map.setCenter(latlng);

                        })

                    });

                }

            });

        }

    </script>

</head>

<body>

    <div style="width: 100%; float: left;">

        <div style="width: 100%; height: 660px; border: 1px solid #C0C0C0;" id="map_canvas">

        </div>

    </div>

</body>

</html>

google map javascript api v3 例子的更多相关文章

  1. Google Map JavaScript API V3 实例大全

    Google Map JavaScript API V3 实例大全 基础知识 简单的例子 地理位置 语言 位置 坐标 简单的投影 事件 简单事件 关闭事件 多次添加事件 事件属性 控制 php禁用ui ...

  2. ☀【移动】Google Maps JavaScript API v3

    Google Maps JavaScript API v3https://developers.google.com/maps/documentation/javascript/tutorial?hl ...

  3. [转]MBTiles 离线地图演示 - 基于 Google Maps JavaScript API v3 + SQLite

    MBTiles 是一种地图瓦片存储的数据规范,它使用SQLite数据库,可大大提高海量地图瓦片的读取速度,比通过瓦片文件方式的读取要快很多,适用于Android.IPhone等智能手机的离线地图存储. ...

  4. Google Map: JavaScript API RefererNotAllowedMapError

    visite https://console.developers.google.com/apis/credentials and select the project you use. http:/ ...

  5. MBTiles 离线地图演示 - 基于 Google Maps JavaScript API v3 + SQLite

    MBTiles 是一种地图瓦片存储的数据规范,它使用SQLite数据库,可大大提高海量地图瓦片的读取速度,比通过瓦片文件方式的读取要快很多,适用于Android.IPhone等智能手机的离线地图存储. ...

  6. android google map v1 v2 v3 参考

    V1,V2已经不被推荐使用,谷歌强烈推荐使用V3. 本人在选择时着实纠结了良久,现在总结如下: 对于V1,现在已经申请不到API KEY了,所以不要使用这个版本.这个是网址:https://devel ...

  7. google map android api v2

    我在这主要列举几个需要注意的问题: 1.需要注意使用的api版本的问题,例如google map android api v1就和v2差别很大,包括申请key方面,所以在搜索资料的时候一定注意版本问题 ...

  8. 国内使用Google Maps JavaScript API

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  9. ArcGis Javascript API (V3.6)加载天地图

    Arcgis的Javascript api开发很活跃,不知不觉都发布了3.6的版本了.该版本基于dojo 1.8.3开发的. 从dojo 1.8开始,AMD机制用得越来越多了,而且require([& ...

随机推荐

  1. iOS 适配https

    1.准备证书 首先找后台要一个证书(SSL证书,一般你跟后台说要弄https,然后让他给你个证书,他就知道了),我们需要的是.cer的证书.但是后台可能给我们的是.crt的证书. 我们需要转换一下: ...

  2. Centos | Linux 下安装启动 mysql 出现 8618 [ERROR] Aborting,查看日志：Plugin 'FEDERATED' is disabled.

    1.试试启动时指定配置文件 ./bin/mysqld_safe --defaults-file=mysql.cnf 或 ./bin/mysqld_safe --defaults-file=mysql. ...

  3. My安卓知识3--多个activity之前共享数据的方法

    在网上搜这个问题的时候看到了有一篇文章说有五种方法: 1.基于消息的通信机制  Intent ---boudle ,extra 数据类型有限,比如遇到不可序列化的数据Bitmap,InputStrea ...

  4. eclipse在光标停留在同一对象的背景色提示，开启与关闭

    eclipse在光标停留在变量上的时候,同一变量能够提示相同的背景色.这个功能感觉不起眼,但是实在是很好用啊.如果不小心点消失了会很麻烦. 这里留个记录,如果关闭了记得开启: 开启关闭的位置在工具栏上 ...

  5. 一 java线程的等待/通知模型

    java 中线程之间的通信问题,有这么一个模型:一个线程修改了一个对象的值,而另一个线程感知到了变化,然后进行相应的操作,整个过程开始于一个线程,而最终执行又是另一个线程.前者是生产者,后者就是消费者 ...

  6. 判断AngularJS渲染页面完成

    $scope.$on('$viewContentLoaded', function(){ }); // 或者 $scope.$watch('$viewContentLoaded', function( ...

  7. block的解析

    1. 操作系统中的栈和堆 我们先来看看一个由C/C++/OBJC编译的程序占用内存分布的结构: 栈区(stack):由系统自动分配,一般存放函数参数值.局部变量的值等.由编译器自动创建与释放.其操作方 ...

  8. mybatis中表与表之间的关联

    第三天 1.mybatis处理表与表之间的关系? 比如要在帖子回复表里显示其它两张相关联表的信息. 处理的第一种方式: 1)主要的数据实体类是ReplyInfo,相关联的实体表的数据是TitleInf ...

  9. iOS 单例模式

    主要用于做应用程序的资源共享控制.用途很多⋯⋯ 实质为,单例是在程序声明周期里 有且仅有 被实例化过一次的类.为确保实例化的唯一,利用类的 类(static)方法来生成和访问对象. 至此,你便可以在程 ...

  10. 图片预加载和AJAX的图片预加载

    利用js实现图片预加载,加载所需要图片的路径与名称即可,很容易实现,该方法尤其适用预加载大量的图片: <div class="hidden"> <script t ...