谷歌地图api多边形重新着色 [英] google map api polygon re-color

问题描述

我想在已设置后更改多边形颜色。但是在用户事件上。

一旦设置了路线颜色，之后它不会改变，这并不是因为，因为在相同的功能中它会改变，但在此之后，它不会，即使tho变量引用确实存在。

这里是小提琴演示：

http://jsfiddle.net/8xq4gd8y/15/

代码

  setTimeout（function（）{
 console.log（'run'）; 
 console。 log（directionsRenderer2）; //<存在于控制台日志
 directionsRenderer2.setOptions（{
 polylineOptions：{
 strokeColor：'gray'
} 
}）; 
}，90）; 
  

解决方案

看起来您需要设置地图属性DirectionsRenderer让它改变：

  setTimeout（function（）{
 console.log（'run'）; 
 console.log（directionsRenderer2）; //<存在于控制台日志
 directionsRenderer2.setOptions（{
 polylineOptions：{
 strokeColor：'gray'
}， 
 map：map 
}）; 
}，1000）; 
  

更新提琴

代码段：

  var map; function renderDirections（result，map）{var directionsRenderer1 = new google.maps.DirectionsRenderer（{directions：result，routeIndex：3，map：map，polylineOptions：{strokeColor：red}}） ; console.log（routeindex1 =，directionsRenderer1.getRouteIndex（））; var directionsRenderer2 = new google.maps.DirectionsRenderer（{directions：result，routeIndex：1，map：map，polylineOptions：{strokeColor：blue}}）; console.log（routeindex2 =，directionsRenderer2.getRouteIndex（））; // line 17 setTimeout（function（）{console.log（'run'）; console.log（directionsRenderer2）; //<以控制台日志方向存在Renderer2.setOptions（{polylineOptions：{strokeColor：'gray'}，map ：maps}）;}，1000）;}函数calculateAndDisplayRoute（origin，destination，directionsService，directionsDisplay，map）{directionsService.route（{origin：origin，destination：destination，travelMode：google.maps.TravelMode.DRIVING，provideRouteAlternatives： （状态=== google.maps.DirectionsStatus.OK）{renderDirections（response，map）;} else {window.alert（'Directions requests failed to +'status'）;} }}）;} function initialize（）{var directionsService = new google.maps.DirectionsService（）; var directionsDisplay = new google.maps.DirectionsRenderer（）; var map = new google.maps.Map（document.getElementById（map_canvas），{center：new google.maps.LatLng（37.4419，-122.1419），zoom：13，mapTypeId：google.maps.MapTypeId.ROADMAP}） ; directionsDisplay.setMap（地图）; calculateAndDisplayRoute（new google.maps.LatLng（51.61793418642200，-0.13678550737318），new google.maps.LatLng（51.15788846699750，-0.16364536053269），directionsService，directionsDisplay，map）;} google.maps.event.addDomListener（window，load， ）;  

<，c $ c> html，body，＃map_canvas {height： 100％;宽度：100％; margin：0px; < script src =https：//

I want to change polygon color after it is already set. but on user event.

Once the route colors are set, it is not changing afterwards, which does not make since, because inside same function it will change but after that, it wont, even tho variable reference does exist.

Here is fiddle demo:

http://jsfiddle.net/8xq4gd8y/15/

code

setTimeout (function () {
    console.log('run');
    console.log(directionsRenderer2); // < exist in console log
        directionsRenderer2.setOptions({
            polylineOptions: {
                strokeColor: 'gray'
            }
        });
  }, 90);

解决方案

Looks like you need to set the map property of the DirectionsRenderer to get it to change:

setTimeout (function () {
  console.log('run');
  console.log(directionsRenderer2); // < exist in console log
  directionsRenderer2.setOptions({
    polylineOptions: {
      strokeColor: 'gray'
    },
    map:map
  });
},1000);

updated fiddle

code snippet:

var map;

function renderDirections(result, map) {
  var directionsRenderer1 = new google.maps.DirectionsRenderer({
    directions: result,
    routeIndex: 3,
    map: map,
    polylineOptions: {
      strokeColor: "red"
    }
  });
  console.log("routeindex1 = ", directionsRenderer1.getRouteIndex());

  var directionsRenderer2 = new google.maps.DirectionsRenderer({
    directions: result,
    routeIndex: 1,
    map: map,
    polylineOptions: {
      strokeColor: "blue"
    }
  });
  console.log("routeindex2 = ", directionsRenderer2.getRouteIndex()); //line 17

  setTimeout(function() {
    console.log('run');
    console.log(directionsRenderer2); // < exist in console log
    directionsRenderer2.setOptions({
      polylineOptions: {
        strokeColor: 'gray'
      },
      map: map
    });
  }, 1000);
}

function calculateAndDisplayRoute(origin, destination, directionsService, directionsDisplay, map) {
  directionsService.route({
    origin: origin,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING,
    provideRouteAlternatives: true
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      renderDirections(response, map);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

function initialize() {
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer();
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(new google.maps.LatLng(51.61793418642200, -0.13678550737318), new google.maps.LatLng(51.15788846699750, -0.16364536053269), directionsService, directionsDisplay, map);
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

这篇关于谷歌地图api多边形重新着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！