之前一直用百度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. Linux内核完全注释阅读笔记1：O(1)时间复杂度查找timeout定时器

    前言 一直有Linux kernel情节,之前也一直在看Linux kernel相关的书和代码,但是每次到最后又由于兴趣转变而荒废了.这次终于静下心来想把Linux内核相关的代码好好看看,算是对自己的 ...

  2. jQuery事件笔记

    bind(eventType[,data],hanlder):eventType表示要创建的处理器指定事件类型的名称.可以使用空格分隔的列表指定多个事件类型.data(对象)调用者提供的数据,用来附加 ...

  3. Web API - Video File Streaming

    关于C# WEBAPI 视频文件 http://www.codeproject.com/Articles/820146/HTTP-Partial-Content-In-ASP-NET-Web-API- ...

  4. easyui datagird 列宽自适应

    代码如下: onLoadSuccess: function (data) { var rows = data.rows; //得到行数据 var columnMaxCharacter = new Ar ...

  5. 其他浏览器（firefox,chrome)可以上网 ie（Internet Explorer）无法上网 解决方法

    http://blog.csdn.net/andywangcn/article/details/8945366

  6. 完全用CSS实现的表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. CentOS 7下设置DNS服务器

    在CentOS 7下,手工设置 /etc/resolv.conf 里的DNS,过了一会,发现被系统重新覆盖或者清除了.和CentOS 6下的设置DNS方法不同,有几种方式: 1.使用全新的命令行工具 ...

  8. Win7 64位命令行编译cuda及设置Windows显卡响应时间

    在开始菜单中找到Visual Studio 2013 >> Visual Studio Tools 选择86或64版本的VC命令提示符环境,我用的 VS2013 x86 Native To ...

  9. 42. Trapping Rain Water

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  10. React Ntive 学习手记

    React使今年来比较热门的前端库,之所以说是库呢,因为React.js是应用于MVC中的V层, 它并不是一个完整的MVC框架,所以,我也不知称之为框架了. 不过这并不影响React的火热. 混合应用 ...