带有可选标记颜色的 Google Maps Web API

如何解决带有可选标记颜色的 Google Maps Web API

我正在开发一个 Google Maps API 应用程序，该应用程序允许用户在地图上选择绘制多边形的颜色。

我还希望应用程序上的颜色选择器定义地图标记的颜色。基本上，如果用户选择蓝色，则在选择时绘制的任何多边形或放置的标记都将为蓝色。

最终结果将是能够在地图上使用不同颜色的标记和多边形。我不确定的是如何拉出选择的颜色并将其传递到标记上。

如果有人能帮助我，我将不胜感激。

var drawingManager;
var selectedShape;
var colors = ['yellow','blue','green','orange','purple','red','pink']; //these colors match what is available from Google regarding markers
var selectedColor;
var colorButtons = {};

// This clears the selected shape when another is selected
function clearSelection() {
  if (selectedShape) {
    if (selectedShape.type !== 'marker') {
      selectedShape.setEditable(false);
    }

    selectedShape = null;
  }
}

// Set selected shape
function setSelection(shape) {
  if (shape.type !== 'marker') {
    clearSelection();
    shape.setEditable(true);
    selectColor(shape.get('fillColor') || shape.get('strokeColor'));
  }

  selectedShape = shape;
}

// Select an object using a custom button
function selectObject() {
  drawingManager.setDrawingMode(google.maps.drawing.OverlayType.SELECT);
}

// Delete a plotted shape
function deleteSelectedShape() {
  if (selectedShape) {
    selectedShape.setMap(null);
  }
}

// Add custom marker buttons
function addMarker() {
  drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
}

// Draw a polygon using custom buttons
function drawPolygon() {
  drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
}

// Draw a rectangle using custom button
function drawRectangle() {
  drawingManager.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);
}

// Draw a circle using custom button
function drawCircle() {
  drawingManager.setDrawingMode(google.maps.drawing.OverlayType.CIRCLE);
}

// Draw a line using custom button
function drawLine() {
  drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYLINE);
}


// Creates the color selector
function selectColor(color) {
  selectedColor = color;
  for (var i = 0; i < colors.length; ++i) {
    var currColor = colors[i];
    colorButtons[currColor].style.border = currColor == color ? '5px solid #789' : '5px solid #fff';
  }

  // Retrieves the current options from the drawing manager and replaces the
  // set stroke or fill color as appropriate.
  var polylineOptions = drawingManager.get('polylineOptions');
  polylineOptions.strokeColor = color;
  drawingManager.set('polylineOptions',polylineOptions);

  var rectangleOptions = drawingManager.get('rectangleOptions');
  rectangleOptions.fillColor = color;
  drawingManager.set('rectangleOptions',rectangleOptions);

  var circleOptions = drawingManager.get('circleOptions');
  circleOptions.fillColor = color;
  drawingManager.set('circleOptions',circleOptions);

  var polygonOptions = drawingManager.get('polygonOptions');
  polygonOptions.fillColor = color;
  drawingManager.set('polygonOptions',polygonOptions);
}

// Sets the color of the shape drawn
function setSelectedShapeColor(color) {
  if (selectedShape) {
    if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
      selectedShape.set('strokeColor',color);
    } else {
      selectedShape.set('fillColor',color);
    }
  }
}

// Build the color buttons

function makeColorButton(color) {
  var button = document.createElement('span');
  button.className = 'color-button';
  button.style.backgroundColor = color;
  google.maps.event.addDomListener(button,'click',function() {
    selectColor(color);
    setSelectedShapeColor(color);
  });

  return button;
}

function buildColorPalette() {
  var colorPalette = document.getElementById('color-palette');
  for (var i = 0; i < colors.length; ++i) {
    var currColor = colors[i];
    var colorButton = makeColorButton(currColor);
    colorPalette.appendChild(colorButton);
    colorButtons[currColor] = colorButton;
  }
  selectColor(colors[0]);
}

// Initialise the map and set start up paramaters
function initialize(Color) {
  var map = new google.maps.Map(document.getElementById('map'),{
    zoom: 14,center: new google.maps.LatLng(56.44649,-2.89219),mapTypeId: google.maps.MapTypeId.SATELLITE,disableDefaultUI: true,zoomControl: true,});

  // Auto map location

  var infoWindow = new google.maps.InfoWindow({
    map: map
  });

  // Geolocation
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,lng: position.coords.longitude
      };

      map.setCenter(pos);
    },function() {
      handleLocationError(true,infoWindow,map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false,map.getCenter());
  }

  function handleLocationError(browserHasGeolocation,pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
      'Error: The Geolocation service failed.' :
      'Error: Your browser doesn\'t support geolocation.');
  }


  // Create the search box and link it to the UI element.
    const input = document.getElementById("pac-input");
    const searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    // Bias the SearchBox results towards current map's viewport.
    map.addListener("bounds_changed",() => {
      searchBox.setBounds(map.getBounds());
    });
    let markers = [];
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener("places_changed",() => {
      const places = searchBox.getPlaces();

      if (places.length == 0) {
        return;
      }
      // Clear out the old markers.
      markers.forEach((marker) => {
        marker.setMap(null);
      });
      markers = [];
      // For each place,get the icon,name and location.
      const bounds = new google.maps.LatLngBounds();
      places.forEach((place) => {
        if (!place.geometry || !place.geometry.location) {
          console.log("Returned place contains no geometry");
          return;
        }
        const icon = {
          size: new google.maps.Size(71,71),origin: new google.maps.Point(0,0),anchor: new google.maps.Point(17,34),scaledSize: new google.maps.Size(25,25),};
        // Create a marker for each place.(this can be removed to stop marker when search has been done)
        markers.push(
          new google.maps.Marker({
            map,icon,title: place.name,position: place.geometry.location,})
        );

        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    });




  //set the polygon charictoristics
  var polyOptions = {
    strokeWeight: 0,fillOpacity: 0.45,editable: true,draggable: true
  };

  var markerOptions = {
    icon: //custom icons can be added here
      "http://maps.google.com/mapfiles/ms/icons/" + "green" + "-dot.png",//pass the colour varible in where green is
    draggable: true
  }
  // Creates a drawing manager attached to the map that allows the user to draw
  // markers,lines,and shapes.
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingControl: false,//hide google defalt drawing control
    drawingMode: google.maps.drawing.OverlayType.POLYGON,polylineOptions: {
      editable: true,draggable: true
    },markerOptions: markerOptions,rectangleOptions: polyOptions,circleOptions: polyOptions,polygonOptions: polyOptions,map: map
  });

  google.maps.event.addListener(drawingManager,'overlaycomplete',function(e) {
    var newShape = e.overlay;

    newShape.type = e.type;

    if (e.type !== google.maps.drawing.OverlayType.MARKER) {
      // revert back to non-drawing mode after drawing a shape.
      drawingManager.setDrawingMode(null);

      // Add an event listener that selects the newly drawn shape when the user
      // mouses down on it.
      google.maps.event.addListener(newShape,function(e) {
        if (e.vertex !== undefined) {
          if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
            var path = newShape.getPaths().getAt(e.path);
            path.removeAt(e.vertex);
            if (path.length < 3) {
              newShape.setMap(null);
            }
          }
          if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
            var path = newShape.getPath();
            path.removeAt(e.vertex);
            if (path.length < 2) {
              newShape.setMap(null);
            }
          }
        }
        setSelection(newShape);
      });
      setSelection(newShape);
    } else {
      google.maps.event.addListener(newShape,function(e) {
        setSelection(newShape);
      });
      setSelection(newShape);
    }
  });



  // Clear the current selection when the drawing mode is changed,or when the
  // map is clicked.
  google.maps.event.addListener(drawingManager,'drawingmode_changed',clearSelection);
  google.maps.event.addListener(map,clearSelection);
  google.maps.event.addDomListener(document.getElementById('select-button'),selectObject);
  google.maps.event.addDomListener(document.getElementById('delete-button'),deleteSelectedShape);
  google.maps.event.addDomListener(document.getElementById('marker-button'),addMarker);
  google.maps.event.addDomListener(document.getElementById('polygon-button'),drawPolygon);
  google.maps.event.addDomListener(document.getElementById('rectangle-button'),drawRectangle);
  google.maps.event.addDomListener(document.getElementById('circle-button'),drawCircle);
  google.maps.event.addDomListener(document.getElementById('line-button'),drawLine);
  buildColorPalette();
}
google.maps.event.addDomListener(window,'load',initialize);