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

I have the next code.

我有下一个代码。

It's works, but for example in another local of code when I try to change the path "flightPath.strokeOpacity = 0" dynamically doesn't show this change.

它是有效的,但是当我尝试动态更改路径“flightPath.strokeOpacity = 0”时,例如在另一个本地代码中没有显示此更改。

I would like know how to change dynamically a path. This function is started when I click on button.

我想知道如何动态改变路径。单击按钮时启动此功能。

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);

2 个解决方案

#1

1. use documented methods. to change the strokeOpacity, use .setOptions:

   使用记录的方法。要更改strokeOpacity,请使用.setOptions:

   flightPath.setOptions({strokeOpacity:0});

2. use variables in their defined scope. To use a button click listener from HTML, it must be in the global scope. Or use google.maps.event.addDomListener in the scope in which it is defined.

   在其定义的范围内使用变量。要使用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" />

#2

If you want to change a Polyline property, you should re-assign the property using .set()

如果要更改Polyline属性,则应使用.set()重新分配属性

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

but be aware that your variables must be visible outside the initialize scope:

但请注意,您的变量必须在初始化范围之外可见:

(function() {
    var map;
    var flightPath;

    function initialize() {
       ...
    }

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

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