javascript - 有没有办法用多个标记来标记区域?
问题描述
在我的项目中,用户制作报告并在地图上留下标记。我想知道是否可以在地图中用不同颜色的更多标记来标记区域。谢谢
下面我写了一部分我的 javascript 代码(也是因为 StackOverflow 不允许我插入所有内容)。您可以查看数据库中的数据并在地图上插入标记。站点启动时会自动插入标记。例如,我想用更多的红色标记来标记该区域。
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45.6140747, lng: 8.8427703},
zoom:14
});
var markerCluster = new MarkerClusterer(map, markersArray,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
$( document ).ready(function() {
dbRef.on('value', function(snapshot) {
snapshot.forEach(function(child) {
var childs=child.val();
//var dataSegn = new Date(childs.data2.year,childs.data2.month,childs.data2.date);
var contentString = 'Segnalazione del: '+childs.data+'<br>Per: '+childs.motivo+'<br><img src="'+childs.urlimmagine+'" alt="Foto" style="width:200px;height:300px;">';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
if(childs.motivo =='ESCREMENTI') {
var marker = new google.maps.Marker({
position: {lat: childs.lat, lng: childs.lon},
map: map,
title: childs.motivo,
icon : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
});
markersArray.push(marker);
marker.addListener('click', function() {
map.setZoom(16);
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
});
}
if(childs.motivo =='PERICOLOSI'){
var marker = new google.maps.Marker({
position: {lat: childs.lat, lng: childs.lon},
map: map,
title: childs.motivo,
icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
markersArray.push(marker);
marker.addListener('click', function() {
map.setZoom(16);
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
});
}
if(childs.motivo =='RANDAGIO'){
var marker = new google.maps.Marker({
position: {lat: childs.lat, lng: childs.lon},
map: map,
title: childs.motivo,
icon : 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
});
markersArray.push(marker);
marker.addListener('click', function() {
map.setZoom(16);
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
});
}
if(childs.motivo =='MALTRATTATI'){
var marker = new google.maps.Marker({
position: {lat: childs.lat, lng: childs.lon},
map: map,
title: childs.motivo,
icon : 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
});
markersArray.push(marker);
marker.addListener('click', function() {
map.setZoom(16);
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
});
}
});
});
解决方案
推荐阅读
- java - 在 JFreeChart 中,如何将域轴标签定位在图例旁边?
- java - 无法插入 Android Studio 的值
- android - 在 API 29 中未调用具有自定义意图的广播接收器
- r - R highcharter - 同一图中具有不同 X 轴的两个条形图
- html - CSS:如果导航位于图像内,我如何让导航工作
- r - 如何在 R 中创建具有顺序条件的循环?
- r - 如何将“weighted.mean”应用于此数据集?
- java - 字段存储库需要找不到类型的 Bean - JAVA
- html-email - HTML EMAILERS / 锚链接
- jsx - 物化网格未知项目数