google map javascript api v3 例子

之前一直用百度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>