有没有办法用多个标记标记区域?

时间:2019-10-15 14:48:18

标签: javascript html google-maps-markers marker

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

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

0 个答案:

没有答案