gpt4 book ai didi

javascript - 给某些 map 图 block 上色

转载 作者:行者123 更新时间:2023-12-03 05:24:25 25 4
gpt4 key购买 nike

我正在尝试对 map 上的特定图 block 进行样式设置,但不知道如何设置。谷歌有一个我在这里指的图 block 的示例: https://developers.google.com/maps/documentation/javascript/examples/maptype-overlay

我已经按照自己想要的方式设置了图 block 的样式,但现在如果我想为特定图 block 着色,我该怎么做?

我有一个 JSFiddle map 示例:

jsFiddle

   function CoordMapType(tileSize) {
this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.innerHTML = "coords:" + coord + ", zoom: " + zoom;
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.fontSize = '10';
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px';
div.style.borderColor = '#0000ff';
div.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
return div;
};

function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(47.53772, -122.1153),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

map.overlayMapTypes.insertAt(
0, new CoordMapType(new google.maps.Size(256, 256)));
var marker = new google.maps.Marker({
position: montpellier,
map: map
});
}

initialize();

最佳答案

要为特定图 block 着色,您需要编写代码来检测要设置样式的图 block ,然后设置其样式。

if (coord.x == 329 && coord.y == 715 && zoom == 11) {
div.style.backgroundColor = 'rgba(255, 0, 0, 0.8)';
} else if (coord.x == 329 && coord.y == 716 && zoom == 11) {
div.style.backgroundColor = 'rgba(0, 255, 0, 0.8)';
} else if (coord.x == 330 && coord.y == 715 && zoom == 11) {
div.style.backgroundColor = 'rgba(0, 0, 255, 0.8)';
} else {
div.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
}

proof of concept fiddle

style map tiles

代码片段:

function CoordMapType(tileSize) {
this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.innerHTML = "coords:" + coord + ", zoom: " + zoom;
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.fontSize = '10';
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px';
div.style.borderColor = '#0000ff';
if (coord.x == 329 && coord.y == 715 && zoom == 11) {
div.style.backgroundColor = 'rgba(255, 0, 0, 0.8)';
} else if (coord.x == 329 && coord.y == 716 && zoom == 11) {
div.style.backgroundColor = 'rgba(0, 255, 0, 0.8)';
} else if (coord.x == 330 && coord.y == 715 && zoom == 11) {
div.style.backgroundColor = 'rgba(0, 0, 255, 0.8)';
} else {
div.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
}
return div;
};

function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(47.53772, -122.1153),
mapTypeId: google.maps.MapTypeId.ROADMAP
});


map.overlayMapTypes.insertAt(
0, new CoordMapType(new google.maps.Size(256, 256)));
var marker = new google.maps.Marker({
position: {
lat: 47.5377,
lng: -122.115
},
map: map
});
}

initialize();
#map {
height: 400px;
width: 100%;
border: 6px solid #dedede;
margin: 0 auto;
}
<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Rectangle Simple</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head>

<body>
<div id="map"></div>
</body>

</html>

关于javascript - 给某些 map 图 block 上色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41214291/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com