javascript - Changing the Multiple Polyline stroke color on google map v3 - Stack Overflow

admin管理员组

文章数量:1356794

I need to create multiple polylines ,each with its own color, and their markers are connected to each other,I am using google map v3.

For example,I have five markers and they are all the connected to each other through red color polylines. Now I want to show this red color polyline in multiple color schemes, first polyline in green, second in Blue, third in Black and so on.

Here is my code

<script type='text/javascript'>
var poly;
var map;
var path;
var i = parseInt(0, 10);
var marker;          

function initialize() {
  var chicago = new google.maps.LatLng(41.879535, -87.624333);
  var myOptions = {
    zoom: 7,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  var polyOptions = {
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  }
  poly = new google.maps.Polyline(polyOptions);
  poly.setMap(map);
  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', addLatLng);
}

/**
* Handles click events on a map, and adds a new point to the Polyline.
* @param {MouseEvent} mouseEvent
*/
function addLatLng(event) {
  i++;
  //var path = poly.getPath();
  path = poly.getPath();
  var polyOptions2 = {
    strokeColor: '#FFFFFF',
    strokeOpacity: 1.0,
    strokeWeight: 3
  }
  if (i == 2) {
    poly.setOptions(polyOptions2);

  }
  else {
    polyOptions2.strokeColor = "#FF0000";
    poly.setOptions(polyOptions2);
  }
  path.push(event.latLng);
  // Add a new marker at the new plotted point on the polyline.
  marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}
</script>

I need to create multiple polylines ,each with its own color, and their markers are connected to each other,I am using google map v3.

For example,I have five markers and they are all the connected to each other through red color polylines. Now I want to show this red color polyline in multiple color schemes, first polyline in green, second in Blue, third in Black and so on.

Here is my code

<script type='text/javascript'>
var poly;
var map;
var path;
var i = parseInt(0, 10);
var marker;          

function initialize() {
  var chicago = new google.maps.LatLng(41.879535, -87.624333);
  var myOptions = {
    zoom: 7,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  var polyOptions = {
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  }
  poly = new google.maps.Polyline(polyOptions);
  poly.setMap(map);
  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', addLatLng);
}

/**
* Handles click events on a map, and adds a new point to the Polyline.
* @param {MouseEvent} mouseEvent
*/
function addLatLng(event) {
  i++;
  //var path = poly.getPath();
  path = poly.getPath();
  var polyOptions2 = {
    strokeColor: '#FFFFFF',
    strokeOpacity: 1.0,
    strokeWeight: 3
  }
  if (i == 2) {
    poly.setOptions(polyOptions2);

  }
  else {
    polyOptions2.strokeColor = "#FF0000";
    poly.setOptions(polyOptions2);
  }
  path.push(event.latLng);
  // Add a new marker at the new plotted point on the polyline.
  marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}
</script>

• javascript
• jquery
• google-maps-api-3

Share Improve this question Follow edited Jan 25, 2012 at 11:02 qiao 18.2k77 gold badges5959 silver badges4646 bronze badges asked Jan 24, 2012 at 10:20 amirhadiamirhadi 5111 gold badge11 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Load your marker options and color for the polylines into an json array and loop through them creating the markers and polylines.

Hope this gets you going.

set this portion of your code in for loop like

       var colorVariable = ["red","green","blue","yellow","black"];

        for(var a =0;a<=5;a++){
              var polyOptions = {
                strokeColor: colorVariable[a],
                strokeOpacity: 1.0,
                strokeWeight: 2
              }
              poly = new google.maps.Polyline(polyOptions);
              poly.setMap(map);
        }

It will work fine

本文标签： javascriptChanging the Multiple Polyline stroke color on google map v3Stack Overflow