之前一直用百度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. My安卓知识2--使用listview绑定sqlite中的数据

    我想在我的安卓项目中实现一个这样的功能,读取sqlite数据库中的数据并显示到某个页面的listview控件中. 首先,我建立了一个Service类,来实现对数据库的各种操作,然后在这个类中添加对数据 ...

  2. Sanarus公司的Cassi微创乳房活检设备投入使用

    这种新型可转动的大核心乳房活检设备,是一种全自动一次性的手工操作的设备.该设备对乳房造成的创伤最小,是传统乳房活检设备很好的替代选择. 该设备被称作Cassi,操作方便而且无需准备时间.无需固定设备的 ...

  3. C1000k 新思路：用户态 TCP/IP 协议栈

    现在的服务器支撑上百万个并发 TCP 连接已经不是新闻(余锋2010年的演讲,ideawu 的 iComet 开源项目,WhatsApp 做到了 2.5M).实现 C1000k 的常规做法是调整内核参 ...

  4. javascript学习第四课函数

    函数也是一种数据类型:function类型 所以函数也可当作一个数据作参数传递 三种函数的声明示例: 一般来讲,声明方式一和声明方式二比较常用,方式三比较少. 常用函数方式示例: 注意:虽然函数支持嵌 ...

  5. MyBatis-NET

    http://www.codeproject.com/Articles/894127/MyBatis-NET https://mybatis.github.io/mybatis-3/

  6. 年月日 生日 js插件

    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min ...

  7. ajax实现手机获取验证码

    <script type="text/javascript"> var InterValObj; //timer变量,控制时间 var count = 60; //间隔 ...

  8. AngularJS学习总结

    第一章  简单认识AngularJS 1.双向数据绑定 可通过ng-model监控输入 ng-app属性声明所有被其包含的内容都属于这个AngularJs应用,这也是我们在web应用中嵌套Angula ...

  9. OpenCV 学习之路(1)

    OpenCV的第一个代码: #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #i ...

  10. shell数组操作

    1.数组定义,shell使用一对括号表示数组,数组元素间用"空格"分隔 # 空数组arr1 arr1=() # 数组arr2,成员分别是1, 2, 3, 4, 5, 6 arr2= ...