Question

让我解释一下这个项目。我有一个巨大的商店列表，其中包含地址（经度和纬度以及代码客户端....）。

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

Answer 1

实现类似于我之前提到的答案。您应该为客户端代码和搜索按钮添加输入。在您创建标记的功能中添加属性＆＃39;代码＆＃39;对于每个标记lowerLevel。单击搜索按钮时，它将执行app.getArgument("my-parameter")功能。如果传递空值，则会恢复所有标记。

查看修改后的代码

＆＃13;

marker.code = CodeClient;

＆＃13;

filterByCode()

＆＃13;

// 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);
    }

}

＆＃13;

我希望这有帮助！

用输入滑块映射标记

1 个答案: