Google Maps APi3：折線線段未顯示在地圖上

Question

咕咕天！

我有一個非常簡單的Google地圖實現，它允許我的用戶在地圖畫布上的任意位置繪制折線。

重新開始時，折線段在地圖上可見，折線使用PHP存儲在mySql數據庫中。

//使用折線編輯地圖時：

如果用戶決定更改折線，我將從數據庫中加載上一條折線，並且該線對用戶可見。 當他們單擊按鈕繪制多段線時，它將從地圖上清除先前的多段線，並允許他們重新開始，但是，一旦他們開始單擊地圖，新的多段線段在地圖上將不可見，但是正確保存到數據庫。

到目前為止，這是我所做的：

var map;
var polyline = null;
var polylinePath = null;

// HERE I INITIALIZE MY MAP ETC ETC ...
// IN EDIT MODE I ALLOW THE FOLLOWING FUNCTION TO BE CALLED FIRST TO LOAD ANY EXISITNG POLYLINES FOR THE USER
// THIS WORKS FINE, IT SHOWS THE PREVIOUS POLYLINE ON THE MAP.
function loadBasePolylines($mapGuid)
        {
            var loadUrl = 'classes/Ajax_System.php';
            $.getJSON(loadUrl+"?action=loadMapPolylines&mapId="+mapGuid, function(json) {
                if(json[0]['hasPolylines'] == 'yes'){

                    var polylinesArray = [];
                    var prepath = polylinePath;
                    if(prepath){
                        prepath.setMap(null);
                    }
                    var points = json[0].Points;
                    for (i=0; i<points.length; i++) {
                        polylinesArray.push(new google.maps.LatLng(points[i].lat,points[i].lon));
                        bounds.extend(new google.maps.LatLng(points[i].lat,points[i].lon));
                    }
                    polyline = new google.maps.Polyline({
                        strokeColor: json[0]['lineColour'],
                        strokeOpacity: 0.5,
                        strokeWeight: json[0]['lineThickness'],
                        clickable: false,
                        path: polylinesArray
                    });

                    polylinePath = polyline.getPath();
                    polyline.setMap(map);                        
                    map.fitBounds(bounds);
                }
            });
        }

// WHEN THE USER PRESS THE "DRAW PATH" BUTTON, THE FOLLOWING FUNCTION IN QUESTION IS CALLED:
function startPolyline()
        {
            if(polyline != null){
                var answer = confirm("This will clear the current polyline from the map. Are you sure you want to continue?");
                if(answer){
                    polyline.setMap(null);
                    if (tempMarkers) {
                        for (i in tempMarkers) {
                            tempMarkers[i].setMap(null);
                        }
                        tempMarkers.length = 0;
                    }
                } else {
                    return;
                }
            }
            var polyOptions = {
                strokeColor: polylineColor,
                strokeOpacity: polyLineOpacity,
                strokeWeight: polyLineWidth,
                clickable: false
            }
            polyline = new google.maps.Polyline(polyOptions);
            polyline.setMap(map);

            // Add a listener for the click event
            google.maps.event.addListener(map, 'click', addPolylinePoint);
        }

        function addPolylinePoint(event)
        {
            var path = polyline.getPath();
            path.push(event.latLng);
            var marker = new google.maps.Marker({
                position: event.latLng,
                title: '#' + path.getLength(),
                icon: '<?php echo URL; ?>public/mapIcons/mm_20_red.png',
                map: map
            });
            tempMarkers.push(marker);
        }

到目前為止，我已經嘗試過：

1. 檢查顏色代碼格式是否正確：是
2. 檢查緯度順序和值：是

任何幫助將由衷的感謝。 先感謝您。

Answer 1

哇，再次閱讀完我的問題后，我已經解決了消失的折線問題。 希望有一天有幫助的人：

在我從數據庫中加載折線的代碼中：

function loadBasePolylines($mapGuid)
    {
.
.
.

 polyline = new google.maps.Polyline({
                    strokeColor: json[0]['lineColour'],
                    strokeOpacity: 0.5,
                    strokeWeight: json[0]['lineThickness'],
                    clickable: false,
                    path: polylinesArray
                });

}

我將筆觸的不透明度設置為0.5（等於50％）...

但是然后，當我在...中啟動折線工具時

function startPolyline()

var polyOptions = {
            strokeColor: polylineColor,
            strokeOpacity: polyLineOpacity,
            strokeWeight: polyLineWidth,
            clickable: false
        }

...我將不透明度設置為一個名為polyLineOpacity的未設置變量。

一旦我添加了全局變量並在...中應用了加載的值

function loadBasePolylines($mapGuid)
    {
.
.
.
 strokeOpacity = json[0]['lineOpacity'] * 100;

 polyline = new google.maps.Polyline({
                    strokeColor: json[0]['lineColour'],
                    strokeOpacity: strokeOpacity,
                    strokeWeight: json[0]['lineThickness'],
                    clickable: false,
                    path: polylinesArray
                });

}

...具有正確不透明度的折線再次正確顯示！

我稱此開發人員為凍結。 Tkx！

Answer 2

嘗試在startPolyline函數中重新啟動map變量

map = new google.maps.Map(document.getElementById('id of your map')):