我在群组中的Google地图上绘制多边形。每个组都有一个独特的颜色,传递给html / JavaScript。
从Delphi调用
function MarkArea(Lat, Lng, otherColor) {
var latLng = new google.maps.LatLng(Lat,Lng);
drawUserGrids(latLng, otherColor);
}
在js中调用的函数
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
drawGridBox = true;
if (drawGridBox == true) {
gridUserArea = new google.maps.Polygon({
path: gridLineSquare,
draggable:false,
geodesic:true,
editable :false,
fillColor: otherColor, << unique
fillOpacity: 0.35,
strokeColor: "#CC0099",
strokeOpacity: 0.1,
strokeWeight: 1
});
gridUserArea.setMap(map);
userGridArray.push(gridUserArea);
}
}
用于通过填充颜色取消组映射
function deListOneColor(otherColor){
if (userGridArray) {
for (var i in userGridArray) {
if (userGridArray[i].gridUserArea.fillColor == otherColor)
userGridArray[i].setMap(null);
}
}
}
我的目标是为用户提供一种基于颜色取消地图特定区域的方法。
JS给我一个错误: 无法获取未定义或空引用的属性'fillColor'。
我是否正确访问了多边形?
答案 0 :(得分:1)
google.maps.Polygon没有userGridArea属性(如果需要,可以创建,但不需要)。这对我有用:
function deListOneColor(otherColor) {
if (userGridArray) {
for (var i in userGridArray) {
if (userGridArray[i].get("fillColor") == otherColor)
userGridArray[i].setMap(null);
}
}
}
代码段
var map;
var userGridArray = [];
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
drawUserGrids(map.getCenter(), "#FF0000");
drawUserGrids(new google.maps.LatLng(37.639097, -120.996878), "#0000FF");
google.maps.event.addDomListener(document.getElementById('deletebtn'), 'click', function() {
deListOneColor(document.getElementById('color').value);
});
}
google.maps.event.addDomListener(window, "load", initialize);
var llOffset = 0.25;
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
drawGridBox = true;
if (drawGridBox == true) {
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 deListOneColor(otherColor) {
if (userGridArray) {
for (var i in userGridArray) {
if (userGridArray[i].get("fillColor") == otherColor)
userGridArray[i].setMap(null);
}
}
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="delete" id="deletebtn" />
<input value="#FF0000" id="color" />
<div id="map_canvas"></div>