首先，我为发布这么多代码而道歉，但我想确保你能看到所有影响的逻辑。
编辑。快速测试只需单击AddData，然后单击Trim Off按钮，直到它显示＆＃34; Spot On＆＃34;。现在点击地图上的任意位置。 Spot On将在＆＃34;裸地图＆＃34;上创建一个黄色方块。但不会在紫色块上画画。我需要能够选择那些块。
我添加了一些位置数据和一些按钮，以便我可以证明这个问题。
运行脚本。
单击AddData按钮。这将在屏幕中央绘制9个多边形。
单击Fence Off，使其显示Fence On。现在单击屏幕上任何不在先前绘制的紫色多边形上的任何位置。这将在屏幕上放置一个Fence工具。
拉伸Fence多边形的手柄以封装大约一半的紫色多边形。使栅栏比紫色多边形大4或5个方格。
现在再次单击围栏按钮以关闭围栏。
请注意，有一个黄色蒙版覆盖了一些紫色多边形，并且有一个黄色蒙版块，其中蒙版位于裸图上。
单击“修剪关闭”按钮一次。它现在应该说是Nibble On 单击其中一个黄色遮罩块。它应该从地图中删除。 单击掩码，其中包含紫色多边形。 没有!!这是一个问题 我希望我的用户可以随意取消选择一个Masked块。
单击Nibble On按钮。现在应该说Spot On。单击裸地图上的任意位置，它应该变为黄色并将另一个块添加到蒙版。
单击紫色块但不绘制蒙版。这是另一个（同样的）问题。
掩码的目的是识别要在现有区域中添加或删除的地图区域。这里没有显示很多，但效果很好。无法在现有绘制数据上使用掩码是唯一的缺陷。
我已经发出了警报，它甚至没有丢弃点击。我假设数据多边形正在拦截它，但它有一个解决方法吗？
<style>
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
<html>
<head>
<title>Find your Qtr minute locator
</title>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.22&libraries=geometry">
</script>
</head>
<body><!-- Declare the div, make it take up the full document body -->
<div id="map-canvas" style="HEIGHT: 100%; WIDTH: 100%" onclick=""></div>
<div id="floating-panel">
<input onclick="AddData();" id="divData" type=button value="AddData">
<input onclick="AddGridOn();" id="divSpot" type=button value="Trim Off">
<input onclick="DrawGridOn();" id="divFence" type=button value="Fence Off">
<input onclick="ClearGrid();" id="divMask" type=button value="Clear Mask">
</div>
<div id="map"></div>
<script type="text/javascript">
var map;
var geocoder;
var marker;
var idx = 0;
var streetAddress = '';
var qtrArray = [];
var dataLatArray = [];
var dataLngArray = [];
var userGridArray = [];
var Startlatlng = "";
var llOffset = 0.00416666666667;
var babyOffset = (llOffset / 2); // offsets gridSelector 1/2 qtr min
var drawGridSelectBox = false;
var noLabels = true;
var addGridOn = false;
var drawGridBox = false;
var deSelectOn = false;
var gridOverBox = new google.maps.Polygon();
var gridSelectBox = new google.maps.Polygon();
var gridUserArea = new google.maps.Polygon();
var qtrNELatLngCode;
var qtrSWLatLngCode;
var gridline;
var latPolylines = [];
var lngPolylines = [];
var lngLabels = [];
var otherColor = "";
var bounds = new google.maps.LatLngBounds();
function initialize() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById("map-canvas"), {
center: new google.maps.LatLng(34.0, -84.0),
zoom: 14,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
});
loadData();
google.maps.event.addListener(map, "click", function (event) {
if (addGridOn) { //spot on
drawGridBox = true;//yellow box
createGridBox(event.latLng);
return;
}
if (drawGridSelectBox) createGridSelectBox(event.latLng);
});
google.maps.event.addListener(map, "idle", function () {
var sLat = map.getCenter().lat();
var sLng = map.getCenter().lng();
createGridLines(map.getBounds());
});
} // initialize
google.maps.event.addDomListener(window, "load", initialize);
function createGridLines(bounds) {
for (var i = 0; i < latPolylines.length; i++) {
latPolylines[i].setMap(null);
}
latPolylines = [];
for (var j = 0; j < lngPolylines.length; j++) {
lngPolylines[j].setMap(null);
}
lngPolylines = [];
for (var k = 0; k < lngLabels.length; k++) {
lngLabels[k].setMap(null);
}
lngLabels = [];
if ((map.getZoom() < 12)) {
return;
}
var north = bounds.getNorthEast().lat();
var east = bounds.getNorthEast().lng();
var south = bounds.getSouthWest().lat();
var west = bounds.getSouthWest().lng();
// define the size of the grid
var topLat = Math.ceil(north / llOffset) * llOffset;
var rightLong = Math.ceil(east / llOffset) * llOffset;
var bottomLat = Math.floor(south / llOffset) * llOffset;
var leftLong = Math.floor(west / llOffset) * llOffset;
qtrNELatLngCode = ddToQM(topLat, rightLong);
qtrSWLatLngCode = ddToQM(bottomLat, leftLong);
for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) latPolylines.push(new google.maps.Polyline({
path: [
new google.maps.LatLng(latitude, leftLong), new google.maps.LatLng(latitude, rightLong)],
map: map,
geodesic: true,
strokeColor: "#0000FF",
strokeOpacity: 0.1,
strokeWeight: 1
}));
for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) lngPolylines.push(new google.maps.Polyline({
path: [
new google.maps.LatLng(topLat, longitude), new google.maps.LatLng(bottomLat, longitude)],
map: map,
geodesic: true,
strokeColor: "#0000FF",
strokeOpacity: 0.1,
strokeWeight: 1
}));
if ((map.getZoom() < 15)|| (noLabels==true)) {
for (var l = 0; l < lngLabels.length; l++) {
lngLabels[l].setMap(null);
}
lngLabels = [];
return;
} // set lngLabels to null
for (var x = 0; x < latPolylines.length; ++x) {
for (var y = 0; y < lngPolylines.length - 1; ++y) {
var latLng = new google.maps.LatLng(latPolylines[x].getPath().getAt(0).lat(),
lngPolylines[y].getPath().getAt(0).lng());
var qtrLatLng = ddToQM(latLng.lat(), latLng.lng());
lngLabels.push(new google.maps.Marker({
map: map,
position: latLng,
icon: {
url: "https://chart.googleapis.com/chart?"
+ "chst=d_bubble_text_small&chld=bb|"
+ qtrLatLng
+ "|FFFFFF|000000",
anchor: new google.maps.Point(0, 42)
}
}));
}
}
} // end createGridLines
function createGridSelectBox(point) {
// places the draggable, editable plumb colored box on the screen to select QtrMinutes
var bottomLeftLat = (Math.floor(point.lat() / llOffset) * llOffset) - babyOffset;
var bottomLeftLong = (Math.floor(point.lng() / llOffset) * llOffset) - babyOffset;
var gridLineSquare = [
new google.maps.LatLng(bottomLeftLat, bottomLeftLong), //lwr left
new google.maps.LatLng(bottomLeftLat, bottomLeftLong + llOffset), //lwr right
new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong + llOffset), //upr right
new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong)]; //upr left
//auto-complete to lwr left
if (drawGridSelectBox == true) {
gridSelectBox = new google.maps.Polygon({
path: gridLineSquare,
draggable: true,
geodesic: true,
editable: true,
fillColor: "#FF0000",
fillOpacity: 0.35,
strokeColor: "#CC0099",
strokeOpacity: 0.1,
strokeWeight: 1
});
gridSelectBox.setMap(map);
drawGridSelectBox = false;
}
}
function MarkArea(Lat, Lng, otherColor) {
var latLng = new google.maps.LatLng(Lat, Lng);
drawUserGrids(latLng, otherColor);
}
function DrawGridOn() { //creates plumb GridSelectBox
//Fence On/Off
if (document.getElementById("divFence").value=="Fence Off"){
document.getElementById("divFence").value="Fence On";
drawGridSelectBox = true;
}
else
if (document.getElementById("divFence").value=="Fence On"){
document.getElementById("divFence").value="Fence Off";
CreateMask();
gridSelectBox.setMap(null);
drawGridSelectBox = false;
}
document.getElementById("divSpot").value="Trim Off";
deSelectOn = false;
addGridOn = false;
}
function CreateMask() {
for (var xx = 0; xx < latPolylines.length; ++xx) {
for (var yy = 0; yy < lngPolylines.length - 1; ++yy) {
var latLng = new google.maps.LatLng(latPolylines[xx].getPath().getAt(0).lat(),
lngPolylines[yy].getPath().getAt(0).lng()); //
if ((google.maps.geometry.poly.containsLocation(latLng, gridSelectBox))) {
createGridBox(latLng);
}
}
}
}
function GotoLatLng(Lat, Lng) {
var latlng = new google.maps.LatLng(Lat, Lng);
map.setCenter(latlng);
}
function AddGridOn() { // Allows adding 1 QtrMin Spot On
if (document.getElementById("divSpot").value=="Trim Off"){
document.getElementById("divSpot").value="Nibble On";
addGridOn = false;
deSelectOn = true;
}
else
if (document.getElementById("divSpot").value=="Nibble On"){
document.getElementById("divSpot").value="Spot On";
deSelectOn = false;
addGridOn = true;
}
else
if (document.getElementById("divSpot").value=="Spot On"){
document.getElementById("divSpot").value="Trim Off";
deSelectOn = false;
addGridOn = false;
}
//report status
}
function toggleButtons() {
document.getElementById("divSpot").disabled=!document.getElementById("divSpot").disabled;
document.getElementById("divFence").disabled=!document.getElementById("divFence").disabled;
document.getElementById("divMask").disabled=!document.getElementById("divMask").disabled;
}
function NoLabelsOn() {
noLabels = true;
}
function NoLabelsOff() {
noLabels = false;
}
function ClearGrid() {
// removes entire yellow mask
if (qtrArray) {
for (var i in qtrArray) {
qtrArray[i].setMap(null);
}
}
qtrArray = [];
idx = 0;
}
function ClearUserGrid() {
// removes all mapped boxes
if (userGridArray) {
for (var i in userGridArray) {
userGridArray[i].setMap(null);
}
}
userGridArray = [];
}
function drawUserGrids(point, otherColor) {
// Square limits
// these are QtrMinutes stored in the database and drawn
var bottomLeftLat = (Math.floor(point.lat() / llOffset) * llOffset);
var bottomLeftLong = (Math.floor(point.lng() / llOffset) * llOffset);
var gridLineSquare = [
new google.maps.LatLng(bottomLeftLat, bottomLeftLong), //lwr left
new google.maps.LatLng(bottomLeftLat, (bottomLeftLong + llOffset)), //lwr right
new google.maps.LatLng((bottomLeftLat + llOffset), (bottomLeftLong + llOffset)), //upr right
new google.maps.LatLng((bottomLeftLat + llOffset), bottomLeftLong)]; //upr left
gridUserArea = new google.maps.Polygon({
path: gridLineSquare,
draggable: false,
geodesic: true,
editable: false,
fillColor: otherColor,
fillOpacity: 0.35,
strokeColor: "#CC0099",
strokeOpacity: 0.1,
strokeWeight: 1
});
gridUserArea.setMap(map);
userGridArray.push(gridUserArea);
}
function createGridBox(point) {
//creates the Yellow grid for New Qtr Minutes
var arrayIdx = 0;
var addListenersOnPolygon = function (polygon) {
google.maps.event.addListener(polygon, 'click', function (event) {
if (deSelectOn == true) {
arrayIdx = qtrArray.indexOf(polygon);
qtrArray.splice(arrayIdx, 1);
polygon.setMap(null);
}
});
};
var bottomLeftLat = (Math.floor(point.lat() / llOffset) * llOffset);
var bottomLeftLong = (Math.floor(point.lng() / llOffset) * llOffset);
var gridLineSquare = [
new google.maps.LatLng(bottomLeftLat, bottomLeftLong), //lwr left
new google.maps.LatLng(bottomLeftLat, (bottomLeftLong + llOffset)), //lwr right
new google.maps.LatLng((bottomLeftLat + llOffset), (bottomLeftLong + llOffset)), //upr right
new google.maps.LatLng((bottomLeftLat + llOffset), bottomLeftLong)]; //upr left
var maskQuarterMin = ddToQM(bottomLeftLat, bottomLeftLong);
drawGridBox = true;
if (qtrArray) {
for (var i in qtrArray) {
if (qtrArray[i].get("qtrMinute") == maskQuarterMin) {
drawGridBox = false;
break;
}
}
}
if (drawGridBox == true) {
gridOverBox = new google.maps.Polygon({
path: gridLineSquare,
draggable: false,
geodesic: true,
editable: false,
fillColor: "#EAED00", //yellow
fillOpacity: 0.35,
strokeColor: "#CC0099",
strokeOpacity: 0.1,
strokeWeight: 1,
qtrMinute: maskQuarterMin,
indexID: ++idx
});
gridOverBox.setMap(map);
addListenersOnPolygon(gridOverBox);
qtrArray.push(gridOverBox);
}
}
function ddToQM(alat, alng) {
var latResult, lngResult, dmsResult;
alat = parseFloat(alat);
alng = parseFloat(alng);
latResult = "";
lngResult = "";
latResult += getDms(alat);
lngResult += getDms(alng);
dmsResult = latResult + lngResult;
// Return the resultant string.
return dmsResult;
}
function getDms(val) {
// Required variables
var valDeg, valMin, valSec, interimResult;
var qtrMin;
val = Math.abs(val);
// ---- Degrees ----
valDeg = Math.floor(val);
valMin = Math.floor((val - valDeg) * 60);
valSec = Math.round((val - valDeg - valMin / 60) * 3600 * 1000) / 1000;
if (valSec == 60) {
valMin += 1;
valSec = 0;
}
if (valMin == 60) {
valMin += 1;
valSec = 0;
}
interimResult = valDeg + "";
if (valMin < 10) {
valMin = "0" + valMin;
}
interimResult += valMin + "";
switch (valSec) {
case 0 :
qtrMin = "A";
break;
case 15 :
qtrMin = "B";
break;
case 30 :
qtrMin = "C";
break;
case 45 :
qtrMin = "D";
break;
}
interimResult += qtrMin;
return interimResult;
}
function loadData(){
dataLatArray.push("34.0020833333333"); dataLngArray.push("-84.0020833333333");
dataLatArray.push("34.0020833333333"); dataLngArray.push("-84.00625");
dataLatArray.push("34.0020833333333"); dataLngArray.push("-84.0104166666667");
dataLatArray.push("34.00625"); dataLngArray.push("-84.0020833333333");
dataLatArray.push("34.00625"); dataLngArray.push("-84.008333333");
dataLatArray.push("34.00625"); dataLngArray.push("-84.012500000");
dataLatArray.push("34.0104166666667"); dataLngArray.push("-84.0020833333333");
dataLatArray.push("34.0104166666667"); dataLngArray.push("-84.00625");
dataLatArray.push("34.0104166666667"); dataLngArray.push("-84.0104166666667");
}
function AddData(){
var sLat = "";
var sLng = "";
for (var i = 0; i < dataLatArray.length; i++) {
sLat = dataLatArray[i];
sLng = dataLngArray[i];
MarkArea(sLat, sLng, "#EE82EE");
}
}
</script>
</body>
</html>
答案 0 :(得分：0)
我把它全部都搞定了。它需要两个解决方案。 Nibble正在添加zIndex值。需要调查我向用户数据添加一个监听器事件。
function drawUserGrids(point, otherColor) {
// Square limits
// these are QtrMinutes stored in the database and drawn
**var addListenersOnPolygon = function (polygon) {
google.maps.event.addListener(polygon, 'click', function (event) {
if (addGridOn) { //spot on
drawGridBox = true;//yellow box
createGridBox(event.latLng);
return;
}
});
};**
var bottomLeftLat = (Math.floor(point.lat() / llOffset) * llOffset);
var bottomLeftLong = (Math.floor(point.lng() / llOffset) * llOffset);
var gridLineSquare = [
new google.maps.LatLng(bottomLeftLat, bottomLeftLong), //lwr left
new google.maps.LatLng(bottomLeftLat, (bottomLeftLong + llOffset)), //lwr right
new google.maps.LatLng((bottomLeftLat + llOffset), (bottomLeftLong + llOffset)), //upr right
new google.maps.LatLng((bottomLeftLat + llOffset), bottomLeftLong)]; //upr left
gridUserArea = new google.maps.Polygon({
path: gridLineSquare,
draggable: false,
geodesic: true,
editable: false,
fillColor: otherColor,
fillOpacity: 0.35,
strokeColor: "#CC0099",
strokeOpacity: 0.1,
zIndex : 100,
strokeWeight: 1
});
gridUserArea.setMap(map);
**addListenersOnPolygon(gridUserArea);**
userGridArray.push(gridUserArea);
}