Question

Goog day！

我有一个非常简单的谷歌地图实现，它允许我的用户在地图画布上的任何地方绘制折线。

重新开始时，折线段在地图上可见，折线使用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);
        }

到目前为止我尝试了什么：

检查颜色代码的格式是否正确：是
检查Lat Lon订单和值：是

真诚地感谢任何帮助。提前谢谢。

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

Google Maps APi3：折线段未显示在地图上

2 个答案: