google map javascript api v3 例子

時間 2019-11-17

標籤 google map javascript api v3 例子欄目 Google 简体版

原文原文鏈接

以前一直用百度map，但若是是國外的項目就須要用google地圖。因爲在國內屏蔽了google地圖的服務，所以調用的是一個國內地址(開發用)。這個地址沒有用key，語言設置也仍是中文的。javascript

//-------------------------------------------------------------------------------------------------html

備註：網上不少國內的例子仍是用v2的接口，差別仍是很大的，v3的接口感受更加接近js的風格，不少參數都直接是json。前端

還有關於移動端的原生API和web API區別，我在github上看到一篇文章是這樣解釋的：原生SDK在移動端會好於web API, 由於web API獲取GIS地圖數據時，是獲取一張張的圖片而後在前端進行拼接，而SDK是獲取地圖數據後在前端重畫的，其獲取數據會小於web api. 固然我想這個解釋話，對於衛星圖應該二者無差。java

//--------------------------------------------------------------------------------------------------jquery

例子中實現了google幾個核心類的主要功能，包括：git

一、在初始化時，定位到正向解析地址，這裏是定位到自由女神像；github

二、在地圖中間位置初始化一個可拖拽的圖標，綁定拖拽結束時間，結束後經過地址逆解析，彈出一個信息提示框；web

三、在地圖上綁定鼠標右擊事件，每一個右擊事件新增一個圖標；json

四、在地圖上綁定鼠標雙擊事件，雙擊後地圖移動到初始位置（中間）；canvas

代碼以下：

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。