首页 > 解决方案 > 有没有办法用多个标记来标记区域?

问题描述

在我的项目中,用户制作报告并在地图上留下标记。我想知道是否可以在地图中用不同颜色的更多标记来标记区域。谢谢

下面我写了一部分我的 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);
        });
      }
        });
        });

标签: javascripthtmlgoogle-maps-markersmarker

解决方案


推荐阅读