使用输入滑块映射标记 [英] maps markers with input sliders
本文介绍了使用输入滑块映射标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
让我解释一下该项目.我有很多商店的地址(经度和纬度以及代码客户端....).
Let me explain the project a bit. i have a huge list of stores with addresses (longitude and latitude and code client ....).
现在，我的问题是，我必须能够根据CodeClient筛选这些标记，我的意思是在基于CodeClient的Google地图中找到客户端.
Now, my problem is, i must be able to filter these markers depending on CodeClient i mean to find the client in google maps based on CodeClient .
推荐答案
实现类似于我之前提到的答案.您应该添加一个用于客户端代码的输入和一个搜索按钮.在创建标记的函数中，为每个标记marker.code = CodeClient;添加一个属性代码".当您单击搜索按钮时，它将执行filterByCode()功能.如果传递空值，它将还原所有标记.
The implementation is similar to the answer I mentioned before. You should add an input for code of client and a search button. In the function where you create markers add a property 'code' for each marker marker.code = CodeClient;. When you click search button it executes the filterByCode() function. If you pass empty value it restores all markers.
看看修改后的代码
// 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" />
我希望这会有所帮助！
这篇关于使用输入滑块映射标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
