之前一直用百度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. 一台独立的服务器是可以可以建立多个网站的，一个ip地址，一个端口

    # 1,若开启虚拟主机,这个一定要有(IP:端口),找到 #NameVirtualHost *:80 修改成: NameVirtualHost 127.0.0.1:80 # 2,修改<Direc ...

  2. postgresql数据迁移

    postgresql从库故障准备新库 1,创建用户[root@localhost home]# userdel postgres[root@localhost home]# groupdel post ...

  3. 服务器Linux系统安全维护基础知识介绍

    事先规划好Linux操作系统的分区 Linux操作系统的分区规划跟微软操作系统的分区规划不同.后者分区规划对于其性能的影响很小.但是Linux操作系统的分区规划则不同,其对服务器的性能影响很大.其实我 ...

  4. Linux分析日志获取最多访问的前10个IP

    原文地址:http://xuqq999.blog.51cto.com/3357083/774714 apache日志分析可以获得很多有用的信息,现在来试试最基本的,获取最多访问的前10个IP地址及访问 ...

  5. 在vCenter5.5中为用户创建角色，管理虚拟机

    在vSphere的使用中,如有只有vCenter+ESXi节点的两级配置,为了达到多租户管理及权限分配,可以在vCenter5.5中为用户创建角色,管理虚拟机 1.以管理员身份登陆vCenter 2. ...

  6. phpStudy 的Apache虚拟主机配置

    放弃了wamp,朋友介绍了phpstudy,不错的一款软件,关键是能自由切换php版本.相关的阿帕奇虚拟主机配置参考:http://www.th7.cn/system/win/201506/10846 ...

  7. ActionScript 3.0 自写类整理笔记（十三）——Random类

    一个简单的随机函数工具类,总共提供了9种静态方法来获取不同的随机值随便写的,如果你还有什么更好的建议,请提出来,谢谢~ index.Random类:代码:public final class Rand ...

  8. oracle权限语句大全

    Oracle 系统默认的几个用户: sys --------网络管理用户,具有最高数据库管理权限 system------本地管理用户,权限次于sys scott-------普通用户,默认是锁住的( ...

  9. 关于git(分布式版本控制系统)的一些操作和命令

    很久没上博客写东西了,今天闲着无聊就不想敲代码,所以看了看有没有一些好玩的东西,这不让我发现了git这个源代码版本控制工具,话不多说,就让我来简单的分享一下它的一些操作和命令以及命令所执行的含义吧! ...

  10. 关于mha手动切换的一些记录（mha方案来自网络）

    mha方案出自:http://www.cnblogs.com/xuanzhi201111/p/4231412.html 当主服务器故障时,人工手动调用MHA来进行故障切换操作,具体命令如下: 先停MH ...