初始化後如何更改路徑值Google地圖

-1

這是行得通的，但例如在另一個本地代碼中，當我嘗試更改路徑"flightPath.strokeOpacity = 0"時動態地不顯示此更改。

我想知道如何動態更改路徑。這個功能在我點擊按鈕時開始。

function initialize() { 
    var mapOptions = { 
    zoom: 3, 
    center: new google.maps.LatLng(0, -180), 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    var flightPlanCoordinates = [ 
    new google.maps.LatLng(37.772323, -122.214897), 
    new google.maps.LatLng(21.291982, -157.821856), 
    new google.maps.LatLng(-18.142599, 178.431), 
    new google.maps.LatLng(-27.46758, 153.027892) 
    ]; 
    var flightPath = new google.maps.Polyline({ 
    path: flightPlanCoordinates, 
    geodesic: true, 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

    flightPath.setMap(map); 
} 

google.maps.event.addDomListener(window, 'load', initialize);

來源

2015-05-11 Halley

你定義'flightpath'就地就近'initialize'。如果你想在該函數之外使用該變量，則必須全局聲明它。 – Andy

使用記錄的方法。要改變strokeOpacity，請使用.setOptions：

flightPath.setOptions（{strokeOpacity：0}）;
在其定義的範圍內使用變量。要使用HTML中的按鈕點擊偵聽器，它必須位於全局範圍內。或者在其定義的範圍內使用google.maps.event.addDomListener。

working fiddle

function initialize() { 
 
    var mapOptions = { 
 
    zoom: 3, 
 
    center: new google.maps.LatLng(0, -180), 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 

 
    var flightPlanCoordinates = [ 
 
    new google.maps.LatLng(37.772323, -122.214897), 
 
    new google.maps.LatLng(21.291982, -157.821856), 
 
    new google.maps.LatLng(-18.142599, 178.431), 
 
    new google.maps.LatLng(-27.46758, 153.027892) 
 
    ]; 
 
    var flightPath = new google.maps.Polyline({ 
 
    path: flightPlanCoordinates, 
 
    geodesic: true, 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 2 
 
    }); 
 

 
    flightPath.setMap(map); 
 
    google.maps.event.addDomListener(document.getElementById('hide'), 'click', function() { 
 
    flightPath.setOptions({ 
 
     strokeOpacity: 0 
 
    }); 
 
    }); 
 
    google.maps.event.addDomListener(document.getElementById('show'), 'click', function() { 
 
    flightPath.setOptions({ 
 
     strokeOpacity: 1.0 
 
    }); 
 
    }); 
 

 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map-canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas" style="border: 2px solid #3872ac;"></div> 
 
<input id="hide" type="button" value="hide" /> 
 
<input id="show" type="button" value="show" />

來源

2015-05-11 13:17:29 geocodezip

如果你想改變一個折線屬性，則應重新分配使用.set()

flightPath.set('strokeOpacity', '0');

的財產，但要知道，你的變量必須是initialize範圍之外可見：

(function() { 
    var map; 
    var flightPath; 

    function initialize() { 
     ... 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

    // Sometime in the future... 
    flightPath.set('strokeOpacity', '0'); 
})();

來源

2015-05-11 13:04:37 nanndoj

初始化後如何更改路徑值Google地圖

回答

相關問題