使用输入滑块映射标记

Question

让我稍微解释一下这个项目。我有大量带有地址的商店列表（经度和纬度以及代码客户端 ....）。

现在，我的问题是，我必须能够根据 CodeClient 过滤这些标记，我的意思是在基于 CodeClient 的谷歌地图中找到客户端。

Answer 1

实现类似于我之前提到的答案。您应该为客户端代码和搜索按钮添加一个输入。在创建标记的函数中，为每个标记marker.code = CodeClient; 添加一个属性“代码”。当您单击搜索按钮时，它会执行 filterByCode() 函数。如果您传递空值，它将恢复所有标记。

看看修改后的代码

// necessary variables
var map;
var infoWindow;
var markersData = [];
var markerCluster;
var markerArray = []; //create a global array to store markers

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(32, -6),
    zoom: 7,
    mapTypeId: 'roadmap',
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  // create MarkerClusterer, markersArray is not populated yet
  markerCluster = new MarkerClusterer(map, [], {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

  // a new Info Window is created
  infoWindow = new google.maps.InfoWindow();

  // Event that closes the Info Window with a click on the map
  google.maps.event.addListener(map, 'click', function() {
    infoWindow.close();
  });
  // Finally displayMarkers() function is called to begin the markers creation
  displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);


// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers() {

  // this variable sets the map bounds according to markers position
  var bounds = new google.maps.LatLngBounds();

  // for loop traverses markersData array calling createMarker function for each marker 
  $.get("https://gist.githubusercontent.com/abdelhakimsalama/358669eda44d8d221bf58c629402c40b/raw/bae93c852669a35f0e7053e9f8d068841ddf146a/get_data_google_api", function(response) {
    markersData = JSON.parse(response);
    for (var i = 0; i < markersData.length; i++) {

      var latlng = new google.maps.LatLng(markersData[i].Latitude, markersData[i].Longitude);
      var Route = markersData[i].Route;
      var Secteur = markersData[i].Secteur;
      var Agence = markersData[i].Agence;
      var CodeClient = markersData[i].CodeClient;
      var PrecisionGPS = markersData[i].PrecisionGPS;
      var Latitude = markersData[i].Latitude;
      var Longitude = markersData[i].Longitude;
      var BarCode = markersData[i].BarCode;
      var PrenomClient = markersData[i].PrenomClient;
      var NumAdresse = markersData[i].NumAdresse;
      var Tel = markersData[i].Tel;
      var Whatsapp = markersData[i].Whatsapp;
      var NbrFrigo = markersData[i].NbrFrigo;
      var OpenAm = markersData[i].OpenAm;
      var CloseAm = markersData[i].CloseAm;
      var OpenPm = markersData[i].OpenPm;
      var ClosePm = markersData[i].ClosePm;
      var OpenAmVen = markersData[i].OpenAmVen;
      var CloseAmVen = markersData[i].CloseAmVen;
      var OpenPmVen = markersData[i].OpenPmVen;
      var ClosePmVen = markersData[i].ClosePmVen;
      var OpenAmDim = markersData[i].OpenAmDim;
      var CloseAmDim = markersData[i].CloseAmDim;
      var OpenPmDim = markersData[i].OpenPmDim;
      var ClosePmDim = markersData[i].ClosePmDim;
      var IMEI = markersData[i].IMEI;
      var Date_Added = markersData[i].Date_Added;

      createMarker(latlng, Route, Agence, Secteur, CodeClient, PrecisionGPS, Latitude, Longitude, BarCode, PrenomClient, NumAdresse, Tel, Whatsapp, NbrFrigo, OpenAm, CloseAm, OpenPm, ClosePm, OpenAmVen, CloseAmVen, OpenPmVen, ClosePmVen, OpenAmDim, CloseAmDim, OpenPmDim, ClosePmDim, IMEI, Date_Added);

      // marker position is added to bounds variable
      bounds.extend(latlng);
    }
    // Finally the bounds variable is used to set the map bounds
    // with fitBounds() function
    map.fitBounds(bounds);
  });
}


// This function creates each marker and it sets their Info Window content
function createMarker(latlng, Route, Agence, Secteur, CodeClient, PrecisionGPS, Latitude, Longitude, BarCode, PrenomClient, NumAdresse, Tel, Whatsapp, NbrFrigo, OpenAm, CloseAm, OpenPm, ClosePm, OpenAmVen, CloseAmVen, OpenPmVen, ClosePmVen, OpenAmDim, CloseAmDim, OpenPmDim, ClosePmDim, IMEI, Date_Added) {

  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    title: CodeClient
  });
  
  marker.code = CodeClient;

  markerArray.push(marker); //push local var marker into global array
  // add marker to the MarkerClusterer
  markerCluster.addMarker(marker);

  // This event expects a click on a marker
  // When this event is fired the Info Window content is created
  // and the Info Window is opened.
  google.maps.event.addListener(marker, 'click', function() {


    var dicoFrigosDetails = {};


    var HTMLtext = "";
    for (var i = 1; i <= Object.keys(dicoFrigosDetails).length / 4; i++) {
      HTMLtext += '';
    }
    // Creating the content to be inserted in the infowindow
    var iwContent = '<div id="iw_container">' +
      '<div class="iw_title">Code Client : ' + CodeClient +
      '</div>' + '<div class="iw_content">Précision : ' + PrecisionGPS +
      '<br />Latitude : ' + Latitude +
      '<br />Longitude : ' + Longitude +
      '<br />Route : ' + Route +
      '<br />Secteur : ' + Secteur +
      '<br />Agence : ' + Agence +
      '<br />Code-barres : ' + BarCode +
      '<br />prenom de Client : ' + PrenomClient +
      //'<br />nom Complet de Client : ' + PrenomClient + ' ' + NomClient +
      '<br />Num Adresse : ' + NumAdresse +
      '<br />Téléphone : ' + Tel +
      '<br />Whatsapp : ' + Whatsapp +
      '<br />Nbr Frigos : ' + NbrFrigo + HTMLtext +
      '<br />Ouverture Matin : ' + OpenAm +
      '<br />Fermeture Matin : ' + CloseAm +
      '<br />Ouverture après-midi : ' + OpenPm +
      '<br />Fermeture Après-midi : ' + ClosePm +
      '<br />Ouverture Matin Ven : ' + OpenAmVen +
      '<br />Fermeture Matin Ven : ' + CloseAmVen +
      '<br />Ouverture après-midi Ven: ' + OpenPmVen +
      '<br />Fermeture après-midi Ven: ' + ClosePmVen +
      '<br />Ouverture Matin Dim : ' + OpenAmDim +
      '<br />Fermeture Matin Dim : ' + CloseAmDim +
      '<br />Ouverture après-midi Dim : ' + OpenPmDim +
      '<br />Fermeture après-midi Dim : ' + ClosePmDim +
      '<br />IMEI : ' + IMEI +
      '<br />Date Passage : ' + Date_Added +
      '</div>';

    // including content to the Info Window.
    infoWindow.setContent(iwContent);
    // opening the Info Window in the current map and at the current marker location.
    infoWindow.open(map, marker);
  });
}

function filterByCode() {
    var code = document.getElementById("code-client").value;
    var bounds = new google.maps.LatLngBounds();
    markerCluster.clearMarkers();
    if (code) {
        markerArray.forEach(function(marker) {
          marker.setMap(null);
        });

        var filtered = markerArray.filter(function(marker) {
          return marker.code === code;
        }); 
    
        if (filtered && filtered.length) {
          filtered.forEach(function(marker) {
            bounds.extend(marker.getPosition());
            marker.setMap(map);
          });
        
          markerCluster.addMarkers(filtered);
          markerCluster.redraw();
          
          map.fitBounds(bounds);
          
       }
    } else {
        markerArray.forEach(function(marker) {
            bounds.extend(marker.getPosition());
            marker.setMap(map);
        });
        
        markerCluster.addMarkers(markerArray);
        markerCluster.redraw();    
        map.fitBounds(bounds);
    }

}

html {
  height: 100%;
  background: gray;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-canvas {
  height: 100%;
}

#iw_container .iw_title {
  font-size: 16px;
  font-weight: bold;
}

.iw_content {
  padding: 15px 15px 15px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>InnoTech - Map - Server</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="search-code-container">
  <input id="code-client" title="Enter code" type="text" placeholder="Enter code (E.g. 511557)" value=""/>
  <input id="code-client-btn" type="button" value="Search" onclick="filterByCode()" />
</div> 
<div id="map-canvas" />

我希望这会有所帮助！