首先，对于发布这么多代码，我深表歉意，但我想确保您可以看到所有影响逻辑的内容。
在编辑上。快速测试只需单击AddData，然后单击Trim Off按钮，直到显示“ Spot On”。现在，单击地图上的任意位置。Spot On将在“裸图”上创建一个黄色正方形，但不会在紫色块上绘制。我需要能够选择那些块。
我添加了一些位置数据和一些按钮，以便可以演示此问题。
运行脚本。
单击添加数据按钮。这将在屏幕中心绘制9个多边形。
单击“栅栏关闭”，使其显示“栅栏打开”。现在，单击屏幕上以前绘制的紫色多边形上没有的任何位置。这会将Fence工具放置在屏幕上。
拉伸“栅栏”多边形的手柄以封装大约一半的紫色多边形。使围栏比紫色多边形大4到5个正方形。
现在，再次单击围栏按钮以关闭围栏。
请注意，有一个黄色蒙版覆盖了一些紫色的多边形，还有一些黄色蒙版块，其中蒙版位于裸露的地图上。
单击一次“修剪关闭”按钮。现在应该说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>
我都工作了。它需要两个解决方案。半字节正在添加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);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句