谷歌地圖 API 開發之添加標記

時間 2019-11-16

標籤谷歌地圖 api 開發添加標記欄目 Chrome 简体版

原文原文鏈接

建立地圖以後，基本上都須要標記位置的，就是那個圓點。而後參考谷歌的API，找了許久，網址：
https://developers.google.com...javascript

代碼以下:html

<!DOCTYPE html>
<html>
    <head>
        <title>Accessing arguments in UI events</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            
            #map {
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
        <script>
            function initMap() {
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: {
                        lat: -25.363882,
                        lng: 131.044922
                    }
                });

                map.addListener('click', function(e) {
                    placeMarkerAndPanTo(e.latLng, map);
                });
            }

            function placeMarkerAndPanTo(latLng, map) {
                var marker = new google.maps.Marker({ //建立marker對象
                    position: latLng,
                    map: map
                });
                map.panTo(latLng); //地圖居中到當前座標
            }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE&callback=initMap&signed_in=true" async defer></script>
    </body>
</html>

這段運行效果，就是你點擊地圖就會添加一個marker標記。而後就這樣子...
java

我是想要一個marker標記呀！這麼多，咋處理，心塞...
谷歌地圖就不能給個完整的麼，真的是╮(╯_╰)╭
而後百度谷歌了很久，就是沒有想要的答案，程序猿的調bug心情，你們都懂的...程序員

不過卻是收穫一點，就是刪除marker的命令：marker.setMap(null);segmentfault

以後，就在點擊事件裏，加上marker.setMap(null)，加到方法裏，結果是marker對象所有清空，並無解決問題。
so，本身想了個辦法，就是每點擊一下，建立的marker對象就存到一個數組裏，而後點擊下一個從新建立marker的時候，就將前一個數組的對象刪除掉。（不知道你們有什麼好的建議，目前沒找到合適的，也不清楚官網的正規方法是怎麼作的...）api

var markersArray = [];
//添加座標對象
function addMarker(latLng, map) {
    if(markersArray.length>0){
        markersArray[0].setMap(null); //每次添加的時候，都要把以前的marker對象清空
    };
    markersArray.shift(marker);    //而後再移出數組
    marker = new google.maps.Marker({
        position: latLng,
        map: map
    });
    markersArray.push(marker); //將新的marker對象添加到數組
}

做爲程序員，也都知道你們的習性，都是但願拿來的代碼直接能用是否是，我一貫都是帥氣善良體貼的man，代碼以下：數組

<!DOCTYPE html>
<html>

    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            
            #map {
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
        <script>
            function initMap() {
                var myLatlng = {
                    lat: -25.363,
                    lng: 131.044
                };
                var marker ;
                var markersArray = [];
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: myLatlng
                });
                map.addListener('click', function(e) {
                    addMarker(e.latLng, map);
                });
                //添加座標對象
                function addMarker(latLng, map) {
                    if(markersArray.length>0){
                            markersArray[0].setMap(null);
                    };
                    markersArray.shift(marker)
                    marker = new google.maps.Marker({
                        position: latLng,
                        map: map
                    });
                    markersArray.push(marker);
                }
            }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE&callback=initMap" async defer></script>
    </body>

</html>

好了，至此就能添加marker了。若是有其它方法，還但願你們能給我提個意見(^o^)/~async

時間不夠了，剩下的下一篇再寫，如何獲取當前點擊的座標以及城市街道地址等。google