在我的项目中,用户进行报告并在地图上留下标记。 我想知道是否有可能在地图上用更多不同颜色的标记来标记区域。 谢谢
下面,我写了一部分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);
});
}
});
});