之前一直用百度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. NSBundle控件和UIImageView和UIButton区别

    1.NSBundle 1> 一个NSBundle代表一个文件夹,利用NSBundle能访问对应的文件夹 2> 利用mainBundle就可以访问软件资源包中的任何资源 3> 模拟器应 ...

  2. c# - catch(Exception ex) 会丢掉StackTrace 是怎么回事?

    原本这篇文章就想写写StackTrace怎么会丢的问题, 但现在的内容变成了讨论怎么处理Exception的问题. 该不该用try catch, 什么时候用?也困扰了我很久, 好像随便写写就可以, 但 ...

  3. 20145316&20145229实验四：驱动程序设计

    20145316&20145229实验四:驱动程序设计 结对伙伴:20145316 许心远 博客链接:http://www.cnblogs.com/xxy745214935/p/6130871 ...

  4. freeCodeCamp:Where do I belong

    我身在何处? 先给数组排序,然后找到指定的值在数组的位置,最后返回位置对应的索引. 举例:where([1,2,3,4], 1.5) 应该返回 1.因为1.5插入到数组[1,2,3,4]后变成[1,1 ...

  5. shell学习--grep2

    grep相关的练习,解释下面grep表达式的含义: grep '\<Tom\>' file 打印file中包含单词 Tom的行 grep 'Tome Savage' file 打印file ...

  6. css定位position认识

    1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolu ...

  7. 最常用的reset代码

    /*css reset code */ /**** 文字大小初始化,使1em=10px *****/body { font-size:12px;} /*字体边框等初始化*/body,div,dl,dt ...

  8. redis连接超时报错

    应用程序连接redis超时,报错如下: ERROR DubboServerHandler-xxx.xx.xx.52:20880-thread-172 2016-12-21 15:25:20,429 c ...

  9. css3 自定义动画（2）位置的移动

    <style> /*涉及到位置的必须给元素进行相对或绝对定位*/ @-webkit-keyframes move{ %{top:0px;left:0px;} %{top:0px;left: ...

  10. RocksDB笔记 - Compaction中的Iterator

    Compaction中的Iterator 一般来说,Compaction的Input涉及两层数据的合并,对于涉及到的每一层数据: 如果是level-0,对level-0的每一个sstable文件建立一 ...