google-maps - Google Maps V3 - 在点击功能上加载不同的标记
问题描述
所以我的 HTML 中有以下代表英国地区的内容:-
<h4 id="google-ne" class="active">The North East</h4>
<h4 id="google-nw">The North West</h4>
<h4 id="google-ea">East Anglia</h4>
<h4 id="google-em">East Midlands</h4>
<h4 id="google-tm">The Midlands</h4>
<h4 id="google-wm">West Midlands</h4>
<h4 id="google-ld">London</h4>
<h4 id="google-se">South East</h4>
<h4 id="google-sw">South West</h4>
<h4 id="google-ws">Wales</h4>
<h4 id="google-sl">Scotland</h4>
然后标记 lat / long 和 region 在 HTML 中显示如下:-
<div class="marker" data-lat="52.559437" data-lng="-2.1493073" data-region="West Midlands"></div>
<div class="marker" data-lat="51.646145" data-lng="-0.45614472" data-region="South East"></div>
以此类推,大约有 400 个标记。
我目前正在使用以下代码在地图上显示所有标记,这些标记运行良好:-
var center = new google.maps.LatLng(51.5280359,-0.1304897);
function initialize_map() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
var markerBounds = new google.maps.LatLngBounds();
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var isDraggable = w > 480 ? true : false;
var mapOptions = {
zoom: 8,
center: center,
//draggable: isDraggable,
//mapTypeControl: false,
//draggable: false,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
scrollwheel: true,
navigationControl: true,
streetViewControl: true,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
// Multiple Markers
// Loop through our array of markers & place each one on the map
$('.marker').each(function() {
var location = {
latLng: new google.maps.LatLng(
$( this ).data( 'lat' ),
$( this ).data( 'lng' )
),
//title: $( this ).find( 'h2' ).html()
};
new google.maps.Marker( {
map: map,
position: location.latLng,
//title: $( this ).data( 'desc' )
} );
markerBounds.extend( location.latLng );
});
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
var styles = [
/* Black & White {"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]} */
/* Colour*/ {"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"saturation":"-63"},{"lightness":"23"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"saturation":"-100"},{"lightness":"25"}]},{"featureType":"landscape.natural.terrain","elementType":"geometry.fill","stylers":[{"saturation":"0"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"saturation":"0"},{"color":"#95bf97"},{"lightness":"59"}]},{"featureType":"poi.school","elementType":"geometry.fill","stylers":[{"lightness":"5"},{"hue":"#ff0000"},{"saturation":"-100"}]},{"featureType":"poi.sports_complex","elementType":"geometry.fill","stylers":[{"lightness":"5"},{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"saturation":"-85"},{"lightness":"12"}]}
];
map.setOptions({styles: styles});
}
initialize_map();
}
我现在要做的是点击说 'West Midlands' #google-wm
,它会删除当前地图上的所有标记,然后只显示data-region
== 'West Midlands' 的标记
怎么可能做到这一点?
提前致谢。
解决方案
你可以做这样的事情。对我添加/更改的部分进行了注释。
var markers = [];
var map;
function initialize() {
var myLatLng = new google.maps.LatLng(52, -1);
var mapOptions = {
zoom: 6,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
$('.marker').each(function() {
var location = {
latLng: new google.maps.LatLng(
$(this).data('lat'),
$(this).data('lng')
),
};
var marker = new google.maps.Marker({
map: map,
position: location.latLng,
});
// Register click event
$(this).on('click', function() {
clickMarker($(this).data('region'));
});
// Push marker and region to markers array
markers.push({
'marker': marker,
'region': $(this).data('region')
});
});
}
function clickMarker(region) {
// Loop through markers array
for (var i = 0; i < markers.length; i++) {
// If marker region = selected region, display it
if (markers[i].region === region) {
markers[i].marker.setMap(map);
} else {
// Hide marker from different region
markers[i].marker.setMap(null);
}
}
}
initialize();
#map-canvas {
height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map-canvas"></div>
<div class="marker" data-lat="52.5" data-lng="-2.1" data-region="West Midlands">Marker 1 - WM</div>
<div class="marker" data-lat="52.6" data-lng="-2.2" data-region="West Midlands">Marker 2 - WM</div>
<div class="marker" data-lat="51.6" data-lng="-0.4" data-region="South East">Marker 3 - SE</div>
<div class="marker" data-lat="51.7" data-lng="-0.5" data-region="South East">Marker 4 - SE</div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
推荐阅读
- amazon-web-services - 无法在 AWS 中为 Lambda 函数设置 S3 触发器
- javascript - 有没有什么方法可以通过js在浏览器中获取操作系统信息?
- python - 如何为python sqlite添加带有字符的自动增量ID
- google-sheets - 谷歌表格数组公式不在其他列中工作,但在另一个列中工作
- expo - Sentry 错误日志记录在 React Native 应用程序中未按预期工作
- java - 如何定义第一次调用我的 @Scheduled 方法的时间?
- java - 如何使用正则表达式匹配字符串以知道字母的前两个单词的第一个单词后来大写
- flutter - 在没有 Flutter 的情况下在 Dart 中使用基本类,如 `Offset`/`Color`
- java - Java:在附加检测期间无法重新定义类
- html - 如何计算传输编码:分块块大小