个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
Google Maps API Data Layer - Dynamic Styling 的文档解释了如何向功能添加事件监听器，以便在单击该功能时，我们可以更改其属性。
如何使用 map 外部的按钮执行类似的操作？在 fiddle 示例中，如何通过单击“蓝色”按钮将 map 上具有“蓝色”属性的字母变为蓝色？
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Dynamic Styling</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>#map {
height: 500px;
}
</style>
</head>
<body>
<button id="blue-button">blue</button>
<button id="red-button">red</button>
<button id="green-button">green</button>
<button id="yellow-button">yellow</button>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -28, lng: 137}
});
// Load GeoJSON.
map.data.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json');
// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
var color = 'gray';
if (feature.getProperty('isColorful')) {
color = feature.getProperty('color');
console.log(color)
}
return ({
fillColor: color,
strokeColor: color,
strokeWeight: 2
});
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB9BG3aO_hV9r8qaGkYmcE5eSx7c4K7be4&callback=initMap">
</script>
</body>
</html>
最佳答案
为您的按钮点击添加一个监听器。这可以通过不同的方式完成。其中之一是使用 Google map addDomListener。
然后你必须遍历所有的特征并设置合适的样式，例如:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: {
lat: -28,
lng: 137
}
});
// Load GeoJSON.
map.data.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json');
// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
var color = 'gray';
if (feature.getProperty('isColorful')) {
color = feature.getProperty('color');
console.log(color)
}
return ({
fillColor: color,
strokeColor: color,
strokeWeight: 2
});
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
google.maps.event.addDomListener(document.getElementById('blue-button'), 'click', function() {
map.data.setStyle(function(feature) {
if (feature.getProperty('color') == 'blue') {
return ({
fillColor: 'blue',
strokeColor: 'blue',
strokeWeight: 2
});
} else {
return ({
fillColor: 'grey',
fillOpacity: .5,
strokeColor: 'grey',
strokeWeight: 2
});
}
});
});
}#map-canvas {
height: 160px;
}<button id="blue-button">blue</button>
<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>关于javascript - 根据要素属性使用外部按钮切换 Google Maps API 数据层要素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55167793/
25
4
0
我从 mapbox 中获取了这个演示: https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/ 我用自己的 GeoJson 文件替换了演示
链接:http://www1.qhoach.com/ 当您拖动时，这张 map 会被平移...但是如果您拖动 KML 要素(带圆圈的图标)，则什么也不会发生 最佳答案 首先，在您的应用程序中有四个级别
我是一名优秀的程序员,十分优秀！