選擇地圖控件外的 Google Maps Polygon 並修改屬性

Question

當在地圖控件之外觸發事件並且似乎撞到磚牆時，我正在嘗試修改多邊形。

我的地圖右側有一系列 div，並且希望在觸發 mouseenter 事件時將多邊形上的 strokeweight 屬性更改為較粗的線，並在觸發鼠標離開時將其重置為默認值。

我也希望能夠在他們點擊這個 div 時選擇多邊形

$( ".zonal" ).mouseenter(function() {
  for (var i = 0; i < gPolygons.length; i++) {
   if(gPolygons[i].id == $(this).attr('id')) 
     {
       gPolygons[i].setOptions({strokeWeight: 6.0});       
     }
  }
});

$( ".zonal" ).mouseleave(function() {
  for (var i = 0; i < gPolygons.length; i++) {
   if(gPolygons[i].id == $(this).attr('id')) 
     {
       gPolygons[i].setOptions({strokeWeight: 2.0}); 
     }
  }
});

我已將多邊形推到一個數組中並嘗試使用以下方法但它不起作用

gPolygons[i].setOptions({strokeWeight: 6.0}); 

這是我嘗試做的事情的視覺效果，因此當它們懸停在區域 1 上時，多邊形的邊界線會變粗，如果單擊 div，將選擇相關的多邊形。

任何幫助表示贊賞的家伙

Answer 1

我在控制台中看到以下 javascript 錯誤： Uncaught TypeError: gPolygons[i].setOptions is not a function 。

該poly你是推到gPolygons和多邊形陣列既對象不是google.maps.Polygon對象，因此它不具有setOptions方法。

function formPolygon(shapePoly){
  var shapeid = shapePoly.get('id');
  var res = (shapePoly.getPath().getArray());
  var coordsArr = iterateCoords(res);
  // this is not a google.maps.Polygon:
  var poly = {id:shapeid,coords:coordsArr, polycolor:shapePoly.get('fillColor')}
  polygons = $.grep(polygons, function(e){ 
    return e.id != shapeid; 
  });
  polygons.push(poly);
  // push the reference to the google.maps.Polygon into the array
  gPolygons.push(shapePoly);
  console.log(polygons);
}

更新的小提琴

代碼片段：

 var zVal = 999999999; var polygons = []; var gPolygons = []; var curID = ""; var mapMain; $('#tt').click(function() { var res = (selectedShape.getPath().getArray()); alert(res); }); $('#tt2').click(function() { alert(polygons[0].coords[0].lat); }); $(".zonal").mouseenter(function() { for (var i = 0; i < gPolygons.length; i++) { if (gPolygons[i].id == $(this).attr('id')) { gPolygons[i].setOptions({ strokeWeight: 6.0 }); } } }); $(".zonal").mouseleave(function() { for (var i = 0; i < gPolygons.length; i++) { if (gPolygons[i].id == $(this).attr('id')) { gPolygons[i].setOptions({ strokeWeight: 2.0 }); } } }); $('.zonal').click(function() { var testid = $(this).attr('id'); $('#mapOverlay').hide(); $('#hdActive').val(testid); curID = testid; clearSelection(); }); var drawingManager; var selectedShape; var colors = ['#1E90FF', '#32CD32', '#FF8C00', '#4B0082']; var selectedColor; var colorButtons = {}; function clearSelection() { if (selectedShape) { selectedShape.setEditable(false); selectedShape = null; } } function checkIDSet(e, a) { e.preventDefault(); if ($('#hdActive').val() == "") { alert('Please select a zone'); return false; } } function setSelection(shape) { clearSelection(); selectedShape = shape; shape.setEditable(true); selectColor(shape.get('fillColor') || shape.get('strokeColor')); $('#zInd').val(shape.get('id')); console.log(shape); } function deleteSelectedShape() { if (selectedShape) { $('#' + selectedShape.id).attr("disabled", false); deletePolygon(selectedShape); selectedShape.setMap(null); } } function selectColor(color) { selectedColor = color; for (var i = 0; i < colors.length; ++i) { var currColor = colors[i]; colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff'; } // Retrieves the current options from the drawing manager and replaces the // 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; polygonOptions.strokeColor = color; drawingManager.set('polygonOptions', polygonOptions); } function formPolygon(shapePoly) { var shapeid = shapePoly.get('id'); var res = (shapePoly.getPath().getArray()); var coordsArr = iterateCoords(res); var poly = { id: shapeid, coords: coordsArr, polycolor: shapePoly.get('fillColor') } polygons = $.grep(polygons, function(e) { return e.id != shapeid; }); polygons.push(poly); gPolygons.push(shapePoly); console.log(polygons); } function iterateCoords(arr) { var coords = []; var base = arr.toString(); base = base.replace(/\\(/g, ""); var baseArr = base.split("),"); $(baseArr).each(function(key, value) { var cObj = value.toString(); var tcObj = cObj.split(','); var c = { lat: tcObj[0].toString(), lon: tcObj[1].toString() } coords.push(c); }); console.log(coords); return coords; } function deletePolygon(shapePoly) { var shapeid = shapePoly.get('id'); var res = (shapePoly.getPath().getArray()); var poly = { id: shapeid, coords: res, polycolor: shapePoly.get('fillcolor') } polygons = $.grep(polygons, function(e) { return e.id != shapeid; }); console.log(polygons); } function setSelectedShapeColor(color) { if (selectedShape) { if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) { selectedShape.set('strokeColor', color); } else { selectedShape.set('fillColor', color); } } } 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]); } function initialize() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: new google.maps.LatLng(55.034997, -7.193612), mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, zoomControl: true }); mapMain = map; var polyOptions = { strokeWeight: 2, fillOpacity: 0.25, id: $('#hdActive').val(), zIndex: zVal, editable: 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({ drawingMode: google.maps.drawing.OverlayType.POLYGON, markerOptions: { draggable: false, icon: 'http://www.myiconfinder.com/uploads/iconsets/256-256-a5485b563efc4511e0cd8bd04ad0fe9e.png' }, polylineOptions: { editable: true }, rectangleOptions: polyOptions, circleOptions: polyOptions, polygonOptions: polyOptions, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.POLYGON ] }, map: map }); var iwfMarker = new google.maps.Marker({ position: { lat: 55.034997, lng: -7.193612 }, icon: 'http://www.myiconfinder.com/uploads/iconsets/256-256-a5485b563efc4511e0cd8bd04ad0fe9e.png', map: map }); iwfMarker.setMap(map); google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { zVal = zVal - 1000000; if (e.type != google.maps.drawing.OverlayType.MARKER) { // Switch 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. var newShape = e.overlay; //Check to see if the shape has an id if not alert user to pick a zone newShape.type = e.type; newShape.id = curID; //newShape.zIndex=zVal; newShape.set('zIndex', zVal); $('#' + curID).addClass("set", true); google.maps.event.addListener(newShape, 'click', function() { if (this.id == "" || this.id == null) { alert('no id'); } setSelection(newShape); }); setSelection(newShape); formPolygon(newShape); clearSelection(); } }); // 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, 'click', clearSelection); google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape); google.maps.event.addDomListener(document.getElementById('map'), 'click', checkIDSet); buildColorPalette(); } google.maps.event.addDomListener(window, 'load', initialize);

 #zonalCont { position: relative; } .zonal { width: 30%; border: 2px solid blue; background-color: #cecece; height: 55px; border-bottom: 20px; } .zonal.set { width: 30%; border: 2px solid blue; background-color: red; height: 55px; border-bottom: 20px; } #map, html, body { padding: 0; margin: 0; height: 100%; } #panel { width: 200px; font-family: Arial, sans-serif; font-size: 13px; float: right; margin: 10px; } #color-palette { clear: both; } .color-button { width: 14px; height: 14px; font-size: 0; margin: 2px; float: left; cursor: pointer; } #delete-button { margin-top: 5px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.google.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <span id="tt">Test</span> <span id="tt2">Test Sel</span> <div id="panel"> <div> <div class='zonalCont'> <div id="zone1" class="zonal">Zone 1</div> </div> <div class='zonalCont'> <div id="zone2" class="zonal">Zone 2</div> </div> <div class='zonalCont'> <div id="zone3" class="zonal">Zone 3</div> </div> <div class='zonalCont'> <div id="zone4" class="zonal">Zone 4</div> </div> </div> <div id="color-palette"></div> <div> <button id="delete-button">Delete Selected Shape</button> </div> <div> <input type="text" id="zInd" /> </div> </div> <div id="map"></div> <div id="mapOverlay" style="position:absolute;left:0;top:0;width:75%;height:100%;background-color:#fff;opacity:0.5;text-align:center"> <h2 style="line-height:15em">Select A Zone</h2> </div> <input type="hidden" class="hdAct" id="hdActive" value="" />