Question

我正在解码编码路径并使用此解码路径在谷歌地图上绘制折线。但是由于某种原因，没有看到画线。知道什么时候出错了吗？

JS代码

encoded_path = 'axwaGtbcqL`BgArBmAjCcBlBcCnBeChB_BrAmAxByBjCoCkAqBmByCu@qA[i@~BmAdAq@FEzAqAvAsA|@{@DCr@{@DIjAuA|@cAz@}@~AeB\[LZxAjDJINM|AkAxAxCfAw@g@jAeBpEOr@Ox@CTeAlMM~AYhDc@pE_AtHGj@m@`Gm@dHa@hFaAbM_AfJ]jDAlA{Hhv@eAdFy@bCcBpEeBzDyArDu@`E_AnFs@|Fq@fGKtKaEqCgBmB_GmFcJaM}@nBg@BbA}CpAaEvAoEnGyOvDuPDSPYAIIMMMGOMMIIKKKQIMIKIKa@gAQ_@Q[CCY_@OSQYQQOOSMSOa@]g@g@UWSUYm@Uk@]qAKe@Ia@I_@Iy@Es@C_AAw@A]Ca@G[Qy@GSKa@M]M_@Qa@M]IOGKQSGIIG}@w@{AgAiAaAWSUOWOQIMEKCICOGMCKEQC_DuA?GbByB\_@~GaIxCgDl@s@bBkBnBcBzCqC`Ai@pCmA^mAd@qA';

decoded_path = google.maps.geometry.encoding.decodePath(encoded_path);

console.log(decoded_path);

var polyOptions = {
            strokeColor: "#970E04" , 
            strokeOpacity: 1.0 , 
            strokeWeight: 2 , 
            path: decoded_path , 
            clickable: false,
            map: map
    }
polyline = new google.maps.Polyline(polyOptions);

其他信息

以下代码将初始地图视图设置为绘制折线的位置：North Cambridge，MA。地图在<body onload="initialize();">中初始化，因此应在绘制折线之前初始化地图。 不对！见下文

function initialize() {
    var center_latlng = new google.maps.LatLng(42.39902115,-71.12902832);
    var options = {
        zoom: 13,
        minZoom: 11,
        maxZoom: 19,
        center: center_latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), options);
}

其他信息＃2

我创建了一个按钮，可以在点击时创建折线。这样我可以确保在初始化地图后创建折线。 点击此按钮会显示折线!!! 如何在地图初始化后加载折线？

$(function() {

    $("#button").click(function() {
        polyline.setPath(decoded_path);
        polyline.setMap(map);
    });

});

Answer 1

尝试使用google.maps.event.addDomListener，例如，

<html>
<head>
    ...
    <script type="text/javascript">
        /**
            * Called on the intiial page load.
        */
        function init() {
            var map = new google.maps.Map(document.getElementById('map'), {
                ...
            });
            ...
            var line = new google.maps.Polyline({
                ...
                map: map
            });
        }
        // Register an event listener to fire once when the page finishes loading.
        google.maps.event.addDomListener(window, 'load', init);
    </script>
</head>
<body>
    <div id="map"></div>
</body>

绘制的折线没有出现在地图上

1 个答案: