如何在Google地图上显示方向后隐藏其他标记
问题描述 投票：0回答：3
此Google地图用于获取到由客户坐标指定为目的地的位置的路线。
为了从选择的数据中获得该值，我将其设为google.maps.LatLng对象，并将坐标另存为字符串形式的值，然后解析经度和纬度以创建LatLng对象。
步骤是：
1-将坐标保存在选项值中：
for (var i = 0; i < data.length; i++) {
displayLocation(data[i]);
addOption(selectBox, data[i]['CodeClient'], data[i].Latitude + "," + data[i].Longitude);
}
2-解析这些坐标并在方向请求中创建google.maps.LatLng对象：
function calculateRoute() {
var start = document.getElementById('start').value;
var destination = document.getElementById('destination').value;
console.log("selected option value=" + destination);
var destPt = destination.split(",");
var destination = new google.maps.LatLng(destPt[0], destPt[1]);
if (start == '') {
start = center;
}
// ....
（以上所有方法都很好）
-----这是我被困的地方：-----
即使显示了指向指定标记的方向，问题是所有标记仍在地图上，对我来说，我尝试使我的函数仅显示两个方向和我选择的代码客户端的标记，所有其他标记都将隐藏。
这是我在代码中添加的内容的注释，
** 1-***一旦添加此功能，即可将所有标记推送到一个变量中*
makeRequest('https://gist.githubusercontent.com/abdelhakimsalama/3cce25789f00c1b84ccb5b231ec455b7/raw/393220f08a02b962e3e764d2b497b318353828db/gistfile1.txt', function(data) {
for (var i = 0; i < data.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].Latitude, data[i].Longitude),
title: data[i].CodeClient,
map: map
});
gmarkers.push(marker);
}
});
** 2-***并且我添加了此功能以隐藏其他标记*
function toggleMarkers() {
for (i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].getMap() != null) gmarkers[i].setMap(null);
else gmarkers[i].setMap(map);
}
}
这个问题我已经面临了好几天，而且似乎无法解决，即使我尝试在此处和Google Maps API文档中查看大量的代码块，但仍无法弄清楚该如何解决。隐藏其他标记。
任何建议，想法和帮助将不胜感激！
这是屏幕截图：
-------------------------------------------------- -------------------------------------------------- ----------------------------------
这里是我更新后的代码
根据您的建议，这是我的代码的更新。
效果很好，我单击按钮（清除标记）后，所有标记都将删除。
现在我想知道如何制作函数toggleMarkers（），删除所有标记，但它将标记保留在我选择的代码客户端中，
var gmarkers = [];
var map;
var directionsService;
var directionsDisplay;
var geocoder;
var infowindow;
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function init() {
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
/*++++++++++++++++++*/
var mapOptions = {
zoom: 6,
center: center = new google.maps.LatLng(32, -6),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
/*++++++++++++++++++*/
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions_panel'));
// Detect user location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var userLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
geocoder.geocode({
'latLng': userLocation
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
document.getElementById('start').value = results[0].formatted_address
}
});
}, function() {
alert('Geolocation is supported, but it failed');
});
}
/*++++++++++++++++++*/
makeRequest('https://gist.githubusercontent.com/abdelhakimsalama/3cce25789f00c1b84ccb5b231ec455b7/raw/393220f08a02b962e3e764d2b497b318353828db/gistfile1.txt', function(data) {
var data = JSON.parse(data.responseText);
var selectBox = document.getElementById('destination');
for (var i = 0; i < data.length; i++) {
displayLocation(data[i]);
addOption(selectBox, data[i]['CodeClient'], data[i].Latitude + "," + data[i].Longitude);
}
});
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function toggleMarkers() {
for (i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].getMap() != null) gmarkers[i].setMap(null);
else gmarkers[i].setMap(map);
}
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function addOption(selectBox, text, value) {
var option = document.createElement("OPTION");
option.text = text;
option.value = value;
selectBox.options.add(option);
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function calculateRoute() {
var start = document.getElementById('start').value;
var destination = document.getElementById('destination').value;
var hakim = document.getElementById('destination');
console.log("selected option value=" + destination);
console.log(" value=" + hakim);
var destPt = destination.split(",");
var destination = new google.maps.LatLng(destPt[0], destPt[1]);
if (start == '') {
start = center;
}
var request = {
origin: start,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
console.log("origin:" + start);
console.log("dest:" + destination.toUrlValue(12));
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
alert("???");
displayLocation(hakim);
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function makeRequest(url, callback) {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
} else {
request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
}
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request);
}
}
request.open("GET", url, true);
request.send();
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function displayLocation(rythmstu_innotec) {
var content = '<div class="infoWindow"><strong> Code Client : ' + rythmstu_innotec.CodeClient + '</strong>' +
'<br />Latitude : ' + rythmstu_innotec.Latitude +
'<br />Longitude : ' + rythmstu_innotec.Longitude +
'<br />Route : ' + rythmstu_innotec.Route +
'<br />Secteur : ' + rythmstu_innotec.Secteur +
'<br />Agence : ' + rythmstu_innotec.Agence +
'<br />prenom de Client : ' + rythmstu_innotec.PrenomClient +
'<br />Num Adresse : ' + rythmstu_innotec.NumAdresse +
'<br />GeoAdresse : ' + rythmstu_innotec.GeoAdresse +
'<br />Téléphone : ' + rythmstu_innotec.Tel +
'<br />Whatsapp : ' + rythmstu_innotec.Whatsapp +
'<br />Nbr Frigos : ' + rythmstu_innotec.NbrFrigo +
'<br />Ouverture Matin : ' + rythmstu_innotec.OpenAm +
'<br />Fermeture Matin : ' + rythmstu_innotec.CloseAm +
'<br />Ouverture après-midi : ' + rythmstu_innotec.OpenPm +
'<br />Fermeture Après-midi : ' + rythmstu_innotec.ClosePm + '</div>';
if (parseInt(rythmstu_innotec.Latitude) == 0) {
geocoder.geocode({
'GeoAdresse': rythmstu_innotec.GeoAdresse
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.rythmstu_innotec,
title: rythmstu_innotec.name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
});
}
});
} else {
var position = new google.maps.LatLng(parseFloat(rythmstu_innotec.Latitude), parseFloat(rythmstu_innotec.Longitude));
var marker = new google.maps.Marker({
map: map,
position: position,
title: rythmstu_innotec.name
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
});
}
}body {
font: normal 14px Verdana;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 18px;
}
#sidebar {
float: right;
width: 30%;
}
#main {
padding-right: 15px;
}
.infoWindow {
width: 220px;
}<title>MAP itinéraire </title>
<meta charset="utf-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<body onload="init();">
<form id="services">
Location: <input type="text" id="start" value="Midar" /> Destination:
<select id="destination" onchange="calculateRoute();"></select>
<input type="button" value="clear map" onclick="toggleMarkers();" />
</form>
<section id="sidebar">
<div id="directions_panel"></div>
</section>
<section id="main">
<div id="map_canvas" style="width: 70%; height: 750px;"></div>
</section>
</body>3个回答
1
投票
投票
您从不调用toggleMarkers功能。
- 修改为
hideMarkers：
function hideMarkers() {
for (i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(null);
}
}
- 然后在成功的路线服务回调函数中调用它：
function calculateRoute() {
var start = document.getElementById('start').value;
var destination = document.getElementById('destination').value;
var hakim = document.getElementById('destination');
var destPt = destination.split(",");
var destination = new google.maps.LatLng(destPt[0], destPt[1]);
if (start == '') {
start = center;
}
var request = {
origin: start,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
hideMarkers(); // <========================= call it here
}
});
displayLocation(hakim);
}
代码段：
var gmarkers = [];
var map;
var directionsService;
var directionsDisplay;
var geocoder;
var infowindow;
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function init() {
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
/*++++++++++++++++++*/
var mapOptions = {
zoom: 6,
center: center = new google.maps.LatLng(32, -6),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
/*++++++++++++++++++*/
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions_panel'));
// Detect user location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var userLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
geocoder.geocode({
'latLng': userLocation
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
document.getElementById('start').value = results[0].formatted_address
}
});
}, function() {
alert('Geolocation is supported, but it failed');
});
}
/*++++++++++++++++++*/
makeRequest('https://gist.githubusercontent.com/abdelhakimsalama/3cce25789f00c1b84ccb5b231ec455b7/raw/393220f08a02b962e3e764d2b497b318353828db/gistfile1.txt', function(data) {
var data = JSON.parse(data.responseText);
var selectBox = document.getElementById('destination');
for (var i = 0; i < data.length; i++) {
displayLocation(data[i]);
addOption(selectBox, data[i]['CodeClient'], data[i].Latitude + "," + data[i].Longitude);
}
});
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function hideMarkers() {
console.log("gmarkers.length=" + gmarkers.length);
for (i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(null);
}
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function addOption(selectBox, text, value) {
var option = document.createElement("OPTION");
option.text = text;
option.value = value;
selectBox.options.add(option);
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function calculateRoute() {
var start = document.getElementById('start').value;
var destination = document.getElementById('destination').value;
var hakim = document.getElementById('destination');
console.log("selected option value=" + destination);
console.log(" value=" + hakim);
var destPt = destination.split(",");
var destination = new google.maps.LatLng(destPt[0], destPt[1]);
if (start == '') {
start = center;
}
var request = {
origin: start,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
console.log("origin:" + start);
console.log("dest:" + destination.toUrlValue(12));
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
hideMarkers();
}
});
displayLocation(hakim);
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function makeRequest(url, callback) {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
} else {
request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
}
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request);
}
}
request.open("GET", url, true);
request.send();
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function displayLocation(rythmstu_innotec) {
var content = '<div class="infoWindow"><strong> Code Client : ' + rythmstu_innotec.CodeClient + '</strong>' +
'<br />Latitude : ' + rythmstu_innotec.Latitude +
'<br />Longitude : ' + rythmstu_innotec.Longitude +
'<br />Route : ' + rythmstu_innotec.Route +
'<br />Secteur : ' + rythmstu_innotec.Secteur +
'<br />Agence : ' + rythmstu_innotec.Agence +
'<br />prenom de Client : ' + rythmstu_innotec.PrenomClient +
'<br />Num Adresse : ' + rythmstu_innotec.NumAdresse +
'<br />GeoAdresse : ' + rythmstu_innotec.GeoAdresse +
'<br />Téléphone : ' + rythmstu_innotec.Tel +
'<br />Whatsapp : ' + rythmstu_innotec.Whatsapp +
'<br />Nbr Frigos : ' + rythmstu_innotec.NbrFrigo +
'<br />Ouverture Matin : ' + rythmstu_innotec.OpenAm +
'<br />Fermeture Matin : ' + rythmstu_innotec.CloseAm +
'<br />Ouverture après-midi : ' + rythmstu_innotec.OpenPm +
'<br />Fermeture Après-midi : ' + rythmstu_innotec.ClosePm + '</div>';
if (parseInt(rythmstu_innotec.Latitude) == 0) {
geocoder.geocode({
'GeoAdresse': rythmstu_innotec.GeoAdresse
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.rythmstu_innotec,
title: rythmstu_innotec.name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
});
}
});
} else {
var position = new google.maps.LatLng(parseFloat(rythmstu_innotec.Latitude), parseFloat(rythmstu_innotec.Longitude));
var marker = new google.maps.Marker({
map: map,
position: position,
title: rythmstu_innotec.name
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
});
}
}body {
font: normal 14px Verdana;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 18px;
}
#sidebar {
float: right;
width: 30%;
}
#main {
padding-right: 15px;
}
.infoWindow {
width: 220px;
}<title>MAP itinéraire </title>
<meta charset="utf-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<body onload="init();">
<form id="services">
Location: <input type="text" id="start" value="Midar" /> Destination:
<select id="destination" onchange="calculateRoute();"></select>
<input type="button" value="clear map" onclick="toggleMarkers();" />
</form>
<section id="sidebar">
<div id="directions_panel"></div>
</section>
<section id="main">
<div id="map_canvas" style="width: 70%; height: 750px;"></div>
</section>
</body>0
投票
投票
您不需要为Directions API]使用var marker = new google.maps.Marker。它们会自动添加到此处，并且一旦您请求新路线也将自动消失。
这里是一个示例应用，一旦更改了下拉菜单，该应用就会呈现路线。您会看到Javascript代码中没有任何可调用marker或infowindow对象的东西，但是它们都存在于映射中。 marker自动添加到起点和终点。如果单击这些标记，则会自动显示infowindow！
function initMap() { var directionsService = new google.maps.DirectionsService(); var chicago = new google.maps.LatLng(41.85, -87.65); var directionsDisplay = new google.maps.DirectionsRenderer(); var map = new google.maps.Map(document.getElementById('distance-map'), { zoom: 5.2, center: chicago }); directionsDisplay.setMap(map); var onChangeHandler = function() { calculateAndDisplayRoute(directionsService, directionsDisplay); }; document.getElementById('start').addEventListener('change', onChangeHandler); document.getElementById('end').addEventListener('change', onChangeHandler); } function calculateAndDisplayRoute(directionsService, directionsDisplay) { directionsService.route({ origin: document.getElementById('start').value, destination: document.getElementById('end').value, travelMode: 'DRIVING' }, function(response, status) { if (status === 'OK') { directionsDisplay.setDirections(response); } else { window.alert('Directions request failed due to ' + status); } }); }#distance-map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #warnings-panel { width: 100%; height:10%; text-align: center; }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <br /> <div id="distance-panel"> Start: <select id="start"> <option value='41.878114,-87.629798'>Chicago</option> <option value='42.331427,-83.045754'>Detroit</option> <option value='39.099727,-94.578567'>Kansas City</option> <option value='41.600545,-93.609106'>Des Molines</option> </select> End: <select id="end"> <option value='38.833882,-104.821363'>Colorado Springs</option> <option value='36.162664,-86.781602'>Nashville</option> <option value='39.768403,-86.158068'>Indianapolis</option> <option value='36.162664,-86.781602'>Nashville</option> </select> </div> <br /> <div id="distance-map"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDLHKWYAEE2PDjvt6BaBH1SIs4Q93PMpQs&callback=initMap"> </script> </body> </html>
您也可以检查jsbin版本here。
希望它回答了您的问题。
0
投票
投票
我有同样的问题。我通过使用此hack解决了这个问题。我得到了十字按钮类，将其添加到查询选择器。
最新问题
- 如何从图中删除或隐藏 x 轴标签
- 自动完成 primeNG。显示多个属性
- 如何确定从 16GB RAM 的物理内存中读取的安全地址范围？
- 我正在尝试从查看器 forge autodesk 检索属性，但它不起作用
- 防止用户自行向联合身份提供商 (FIP) 注册，但允许使用 FIP 登录（如果由管理员添加）
- 将X11配置为两个显卡，三个头，两个Zaphodmode？
- SendUsingAccount SendAs 权限但在索引中找不到
- 如何向 Autodesk Forge Viewer 添加扩展？
- Ansible，如果一项发生变化则运行处理程序
- NSKeyedUnarchiver - 删除解码数据？
- 如何将位图复制到我的窗口缓冲区？
- 我有一个问题，我可以获取console.log数据，但是当我刷新页面时，我得到了错误
- clang 16 不使用模板友元函数处理 niebloid 是否有解决方法？
- Java中一个对象可以同时属于数组和数组列表吗？
- Supabase 和 Flutter 的 AuthRetryableFetchError
- 使用 ib_insync 实现多个目标退出的括号顺序
- 如何在Android中使用AudioManager或AudioTrack在Opus播放器android中获取AMPLITUDE
- 这个例子中isAssignableFrom和instanceof有什么区别？
- 自定义 Docker 容器 Github 操作无法在 /github/workspace 中找到 Node 脚本
- 按名称获取 AzureSQL 故障转移组
© www.soinside.com 2019 - 2024. All rights reserved.