Question

我有下一个代码。

它是有效的，但是当我尝试动态更改路径"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);

Answer 1

如果要更改折线属性，则应使用.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');
})();

Answer 2

使用记录的方法。要更改strokeOpacity，请使用.setOptions：

flightPath.setOptions（{strokeOpacity，用于：0}）;
在定义的范围内使用变量。要使用HTML中的按钮单击侦听器，它必须位于全局范围内。或者在定义它的范围内使用google.maps.event.addDomListener。

working fiddle

parts{
    125:
    ...
    ...
    ...
    139:{
        'Lev1': u'82', 
        'Marker': u'16', 
        'TYPE': u'139', 
        'Location': u'A'
        plus other previously gathered data
        }

    140:{
        'Lev2': u'652', 
        'Marker': u'1', 
        'TYPE': u'140', 
        'Location': u'C'
        plus other previously gathered data
        }

    141:{
        'Lev3': u'452', 
        'Marker': u'188', 
        'TYPE': u'141', 
        'Location': u'B'
        plus other previously gathered data
        }
    142:etc
    ...
}

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
}

如何在初始化Google地图后更改路径值

2 个答案: