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')):