- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在Google Maps上渲染多条路线,例如,如果我单击某条路线的A点标记,它将渲染该路线,如果我单击另一条标记,它将绘制另一条路线,我尝试这样做,但它却在我的数据库中加载了相同的路由,我想使用多个ID来定义要渲染的路由。
因此,我将发布示例和代码给您理解。
This是我的创建路线的项目
this是加载路线的项目
这是我的loadproject脚本:
var map, ren, ser;
var data = {};
var data2 = {};
var directionsDisplay;
var directionResult = [];
var rotaArray = [];
var directionsService = new google.maps.DirectionsService();
var infowindow;
function goma()
{
map = new google.maps.Map( document.getElementById('mappy'), {'zoom':12, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'center': new google.maps.LatLng(-23.611654, -46.700329)});
var infoWindow = new google.maps.InfoWindow;
ren = new google.maps.DirectionsRenderer( {'draggable':true} );
ren.setMap(map);
ren.setPanel(document.getElementById("directionsPanel"));
ser = new google.maps.DirectionsService();
downloadUrl("rotasXML.php", function(data) {
var rotasXML = data.responseXML;
var rotas = rotasXML.documentElement.getElementsByTagName("rota");
for (var i = 0; i < rotas.length; i++ )
{
var id = rotas[i].getAttribute("id");
var latA = parseFloat(rotas[i].getAttribute("latA"));
var lngA = parseFloat(rotas[i].getAttribute("lngA"));
var latB = parseFloat(rotas[i].getAttribute("latB"));
var lngB = parseFloat(rotas[i].getAttribute("lngB"));
var rotaB = new google.maps.LatLng(
parseFloat(rotas[i].getAttribute("latB")),
parseFloat(rotas[i].getAttribute("lngB")));
var rotaA = new google.maps.LatLng(latA,lngA);
var html = "<b> Marker " + id + "</b> <br/>",
html = html + "FROM "+latA+" : "+lngA;
html = html + "<br/>To "+latB +" : "+lngB;
var parameter = id+","+latA+","+lngA+","+latB+","+lngB;
html = html + "<br/><button onclick='doIt("+id+ latA+ latB+ lngA+ lngB+")'>Load Route</button>";
var wayA = new google.maps.Marker({
map: map,
position: rotaA
});
rotaArray.push(wayA);
bindInfoWindow(wayA, map, infoWindow, html);
}
});
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url2, callback) {
var jax = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
jax.onreadystatechange = function()
{
if (jax.readyState == 4) {
jax.onreadystatechange = doNothing;
callback(jax, jax.sts);
}
};
jax.open('GET', url2, true);
jax.send(null);
}
function doIt(id,latA, latB, lngA, lngB){
alert(id);
ser.route({
'origin':new google.maps.LatLng(latA, lngA),
'destination':new google.maps.LatLng(latB, lngB),
'travelMode': google.maps.DirectionsTravelMode.DRIVING},
function(response){
ren.setDirections(response);
});
}
function setAllMap(map) {
for (var i = 0; i < rotaArray.length; i++) {
rotaArray[i].setMap(map);
}
}
function clearOverlays() {
setAllMap(null);
}
function deleteOverlays() {
clearOverlays();
rotaArray = [];
}
}
最佳答案
要选择标记以显示路线,您将需要数组来容纳标记
var markerArray = [];
和路线坐标
var routeArray =[[],[],[],[],[]];
这是加载标记的代码
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
alert(markers.length);
for (var i = 0; i < markers.length+1; i++) {
id = markers[i].getAttribute("id");
var latA = parseFloat(markers[i].getAttribute("latA"));
var lngA = parseFloat(markers[i].getAttribute("lngA"));
var latB = parseFloat(markers[i].getAttribute("latB"));
var lngB = parseFloat(markers[i].getAttribute("lngB"));
//fill routeArray
routeArray[i].push(id);
routeArray[i].push(latA);
routeArray[i].push(lngA);
routeArray[i].push(latB);
routeArray[i].push(lngB);
var point = new google.maps.LatLng(latA,lngA);
//Build html for Infowindow
var html = "<b> Marker " + id + "</b> <br/>",
html = html + "FROM "+latA+" : "+lngA;
html = html + "<br/>To "+latB +" : "+lngB;
var parameter = id+","+latA.toString()+","+lngA.toString()+","+latB.toString()+","+lngB.toString();
html = html + "<br/><button onclick='doIt("+id+")'>Load Route</button>";
var marker = new google.maps.Marker({
map: map,
position: point,
});
//marker array to allow clearin markers
markerArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
}
和加载路由的代码(从doIt()调用)
function calcRoute(latAa,lngAa,latBa,lngBa) {
var start = new google.maps.LatLng(latAa,lngAa);
var end = new google.maps.LatLng(latBa,lngBa);
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";
// For each route, display summary information.
i = 0;
summaryPanel.innerHTML += "From "+route.legs[i].start_address + " <br /> ";
summaryPanel.innerHTML += "To "+route.legs[i].end_address + "<br />";
summaryPanel.innerHTML += "Distance: "+route.legs[i].distance.text + "<br />";
distance = parseFloat(route.legs[i].distance.text)*rate;
}
});
}
function doIt(id){
//Convert for array zero index
id = id-1;
var latAa= routeArray[id][1];
var lngAa= routeArray[id][2];
var latBa= routeArray[id][3];
var lngBa= routeArray[id][4];
clearOverlays();
calcRoute(latAa,lngAa,latBa,lngBa);
}
这个
DEMO显示结果
关于javascript - 在Google Maps v3上加载多条路线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12690779/
我有两种类型的路由 Public 和 Private。 只有用户登录后才能访问所有私有(private)路由: return tokenService.token ? ( <>
我已按照 Laravel 5.5 文档在我们的应用程序上要求、安装和配置 Laravel Passport。我们仅使用密码授予功能,因为我们不打算将其用作社交登录工具。但是,按照所有说明操作后,我在尝
我想设置事件菜单项的样式,为此我需要将当前 url 与路由进行比较。我知道我可以在 javascript 中做到这一点,但我想知道其他人是如何解决这个问题的。 有什么建议么? 伪代码: My Page
我正在尝试在浏览器上以图形方式显示路径/路线以供客户查看。例如,基于 txt 或 XML 文件,包含说明。 4 90 5 90 2 或 F4,L90,F5,L90,F2 相当于
我创建了一个中间件来阻止我的 laravel 应用程序中的某些路由,但不起作用,无法弄清楚我做错了什么,这是我的代码: ps:我使用的是 laravel 5.2 路线: Route::get('sec
我正在使用 Java 工作。给定一个矩阵 NxM,我需要找到通过该数组的所有可能路径。只允许斜向上或斜向下,或向右斜行。 4x4 矩阵示例: 3 5 7 9 2 4 6 8 9 3 7
我是 Marionette 新手,只是找不到上类路线。 我正在使用 Marionette 的 2.4.1 版本,并尝试以最简单的方式进行操作,以便它能够正常工作。 此代码适用于旧版本的 Marione
我是 AngularJS 的新手。我正在尝试从这个网站( https://docs.angularjs.org/tutorial/step_07 )学习 AngularJS。我的代码如下 index.
我在 yandexmapkit-android 项目上工作。图书馆链接是 https://github.com/yandexmobile/yandexmapkit-android 文档非常薄弱,git
我正在阅读有关 Angular 路由的文档并创建了一个简单的测试: const routes: Route[] = [ { path: '', redirectTo: '/home', pat
我正在开发一项服务 (spring-boot),它获取一个 ID 列表,一个一个地从数据库中获取对象,将这些对象聚合成批处理,然后将它们保存在其他地方。目前,聚合后的批量大小约为 50 个对象,大约每
我正在制作一个网站,在用户登录后,用户将被重定向到主页。网站的主页和所有其他页面只能由登录用户访问,但即使在用户登录后(firebase auth),网站的其余部分( protected 路由)仍然无
我有一个惰性模块,我希望在桌面和移动设备上有不同的体验。基本上我想要我的桌面布局如下: Component1 显示一个列表,用户在列表中选择一个项目,component2 将显示详细信息。我创建了名为
我是 Angular 的新手,我正在尝试让我的路由器工作。基本上我在 / 有一个主页,其中有一个到 /courses 的路由器链接,它运行良好,但是当我重新加载 /courses 时(或输入地址in)
完整的 Mojolicious 应用程序有 routes将转储应用程序路由的命令: script/my_app.pl routes 我如何从 Lite 的测试脚本中做同样的事情应用? use Mojo
我有一个 Camel 2.13.1 应用程序,它使用我通过 CXF 组件访问的外部 Web 服务。我使用 Spring XML 路由元素的 startupOrder 属性来确保在我设置为在启动时调用一
我们有一个在 Karaf 2.4.3 和 Camel 2.15.3 上运行的数据处理应用程序。 在这个应用程序中,我们有一堆导入数据的路由。我们有一个管理 View ,其中列出了这些路由以及每条路由的
我正在尝试组合一个应用程序,我可以在其中查询谷歌路线服务,存储结果以建立缓存,然后根据需要呈现路线。 我可以取回方向数据并将其存储在数据库中就好了,这一切都很好,现在当我在 map 上渲染方向时,我的
我根据 Ryan Bates 的 railscast 使用设计登录创建了一个新项目. 它没有注册路线(与我之前制作的项目不同,步骤完全相同) This image显示了两个“rake 路由”命令。顶
我发现 Google Maps API 通过以下方式支持路线: var map; var directionsPanel; var directions; function initialize()
我是一名优秀的程序员,十分优秀!