我正在使用下面的代码通过其网页上的API在Google Map上的某些标记之间购买路线图。您也可以在FIDDLE上查看它。
<style type="text/css">
html,body,#dvMap {
height:100%;
width:100%;
}
</style>
<div id="info"></div>
<div id="dvMap"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<script type="text/javascript">
var directionsDisplay = [];
var directionsService = [];
var map = null;
function calcRoute() {
var msg = "25.001807, 67.123459:25.007006, 67.076991:24.957115, 67.076278:24.945176, 67.084069:24.940619, 67.080735:24.936648, 67.076211:24.927262, 67.064335:24.918269, 67.053686:24.909177, 67.049781:24.900226, 67.044931:24.892076, 67.043592:24.880923, 67.039432:24.872733, 67.035963:24.859631, 67.015729:24.854257, 67.006481:24.848813, 66.996748:24.825830, 66.979450:24.818366, 66.975126";
var input_msg = msg.split(":");
var locations = new Array();
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < input_msg.length; i++) {
var tmp_lat_lng = input_msg[i].split(",");
locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1]));
bounds.extend(locations[locations.length-1]);
}
var mapOptions = {
// center: locations[0],
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
map.fitBounds(bounds);
var i = locations.length;
var index = 0;
while (i != 0) {
if (i < 3) {
var tmp_locations = new Array();
for (var j = index; j < locations.length; j++) {
tmp_locations.push(locations[index]);
}
drawRouteMap(tmp_locations);
i = 0;
index = locations.length;
}
if (i >= 3 && i <= 10) {
console.log("before :fun < 10: i value " + i + " index value" + index);
var tmp_locations = new Array();
for (var j = index; j < locations.length; j++) {
tmp_locations.push(locations[j]);
}
drawRouteMap(tmp_locations);
i = 0;
index = locations.length;
console.log("after fun < 10: i value " + i + " index value" + index);
}
if (i >= 10) {
console.log("before :fun > 10: i value " + i + " index value" + index);
var tmp_locations = new Array();
for (var j = index; j < index + 10; j++) {
tmp_locations.push(locations[j]);
}
drawRouteMap(tmp_locations);
i = i - 9;
index = index + 9;
console.log("after fun > 10: i value " + i + " index value" + index);
}
}
}
function drawRouteMap(locations) {
var start, end;
var waypts = [];
for (var k = 0; k < locations.length; k++) {
if (k >= 1 && k <= locations.length - 2) {
waypts.push({
location: locations[k],
stopover: true
});
}
if (k == 0) start = locations[k];
if (k == locations.length - 1) end = locations[k];
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
console.log(request);
directionsService.push(new google.maps.DirectionsService());
var instance = directionsService.length - 1;
directionsDisplay.push(new google.maps.DirectionsRenderer({
preserveViewport: true
}));
directionsDisplay[instance].setMap(map);
directionsService[instance].route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
console.log(status);
directionsDisplay[instance].setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', calcRoute);
</script>
现在我的问题是,我想在每个标记标签上显示自己想要的文本,当前Google正在显示默认地址,如下图所示。
我尝试了很多事情并用谷歌搜索,但无法在我的代码中添加此功能。那有可能在这里写我自己的文字吗????
演示文本按其时时显示:
var locations = [
['Ahsanabad Chowrangi', 25.001807, 67.123459, 1],
['Allah Wali Chowrangi', 25.007006, 67.076991, 2],
['Shafique Mor', 24.957115, 67.076278, 3],
['Sohrab Goth Flyover', 24.945176, 67.084069, 4],
['Ancholi', 24.940619, 67.080735, 5],
['Water Pump Chowrangi', 24.936648, 67.076211, 6],
['Ayesha Manzil Chowrangi', 24.927262, 67.064335, 7],
['Karimabad Chowrangi', 24.918269, 67.053686, 8],
['Liaquatabad 10 Number Chowrangi', 24.909177, 67.049781, 9],
['Lalo Kheet Daak Khana Chowrangi', 24.900226, 67.044931, 10],
['Teen Hatti Bridge', 24.892076, 67.043592, 11],
['Gurumandar', 24.880923, 67.039432, 12],
['Numaish Chowrangi', 24.872733, 67.035963, 13],
['Jama Cloth Market', 24.859631, 67.015729, 14],
['City Court', 24.854257, 67.006481, 15],
['Tower', 24.848813, 66.996748, 16],
['Nagina Center', 24.825830, 66.979450, 17],
['Kemari No. 1', 24.818366, 66.975126, 18]
];
答案 0 :(得分:1)
要更改为每个标记显示的文本,请在调用路线渲染器之前,在路线响应中修改该腿的start_address
属性。为了同样获得最后一点,还应将end_address
属性设置为下一条腿的结束标记的值。
for (var leg = 0; leg < response.routes[0].legs.length; leg++) {
response.routes[0].legs[leg].start_address = markerText[instance * 9 + leg][0] + "<br>instance=" + instance;
}
(上面的代码假设一个数组markerText
包含您希望为每个标记显示的文本)。
proof of concept fiddle using your array of locations
代码段:
var directionsDisplay = [];
var directionsService = [];
var markerText = [
['Ahsanabad Chowrangi', 25.001807, 67.123459, 1],
['Allah Wali Chowrangi', 25.007006, 67.076991, 2],
['Shafique Mor', 24.957115, 67.076278, 3],
['Sohrab Goth Flyover', 24.945176, 67.084069, 4],
['Ancholi', 24.940619, 67.080735, 5],
['Water Pump Chowrangi', 24.936648, 67.076211, 6],
['Ayesha Manzil Chowrangi', 24.927262, 67.064335, 7],
['Karimabad Chowrangi', 24.918269, 67.053686, 8],
['Liaquatabad 10 Number Chowrangi', 24.909177, 67.049781, 9],
['Lalo Kheet Daak Khana Chowrangi', 24.900226, 67.044931, 10],
['Teen Hatti Bridge', 24.892076, 67.043592, 11],
['Gurumandar', 24.880923, 67.039432, 12],
['Numaish Chowrangi', 24.872733, 67.035963, 13],
['Jama Cloth Market', 24.859631, 67.015729, 14],
['City Court', 24.854257, 67.006481, 15],
['Tower', 24.848813, 66.996748, 16],
['Nagina Center', 24.825830, 66.979450, 17],
['Kemari No. 1', 24.818366, 66.975126, 18]
];
var map = null;
function calcRoute() {
var msg = "25.001807, 67.123459:25.007006, 67.076991:24.957115, 67.076278:24.945176, 67.084069:24.940619, 67.080735:24.936648, 67.076211:24.927262, 67.064335:24.918269, 67.053686:24.909177, 67.049781:24.900226, 67.044931:24.892076, 67.043592:24.880923, 67.039432:24.872733, 67.035963:24.859631, 67.015729:24.854257, 67.006481:24.848813, 66.996748:24.825830, 66.979450:24.818366, 66.975126";
var input_msg = msg.split(":");
var locations = new Array();
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < input_msg.length; i++) {
var tmp_lat_lng = input_msg[i].split(",");
locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1]));
bounds.extend(locations[locations.length - 1]);
}
var mapOptions = {
// center: locations[0],
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
map.fitBounds(bounds);
var i = locations.length;
var index = 0;
while (i != 0) {
if (i < 3) {
var tmp_locations = new Array();
for (var j = index; j < locations.length; j++) {
tmp_locations.push(locations[index]);
}
drawRouteMap(tmp_locations);
i = 0;
index = locations.length;
}
if (i >= 3 && i <= 10) {
console.log("before :fun < 10: i value " + i + " index value" + index);
var tmp_locations = new Array();
for (var j = index; j < locations.length; j++) {
tmp_locations.push(locations[j]);
}
drawRouteMap(tmp_locations);
i = 0;
index = locations.length;
console.log("after fun < 10: i value " + i + " index value" + index);
}
if (i >= 10) {
console.log("before :fun > 10: i value " + i + " index value" + index);
var tmp_locations = new Array();
for (var j = index; j < index + 10; j++) {
tmp_locations.push(locations[j]);
}
drawRouteMap(tmp_locations);
i = i - 9;
index = index + 9;
console.log("after fun > 10: i value " + i + " index value" + index);
}
}
}
function drawRouteMap(locations) {
var start, end;
var waypts = [];
for (var k = 0; k < locations.length; k++) {
if (k >= 1 && k <= locations.length - 2) {
waypts.push({
location: locations[k],
stopover: true
});
}
if (k == 0) start = locations[k];
if (k == locations.length - 1) end = locations[k];
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
console.log(request);
directionsService.push(new google.maps.DirectionsService());
var instance = directionsService.length - 1;
directionsDisplay.push(new google.maps.DirectionsRenderer({
preserveViewport: true
}));
directionsDisplay[instance].setMap(map);
directionsService[instance].route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
console.log(status);
for (var leg = 0; leg < response.routes[0].legs.length; leg++) {
response.routes[0].legs[leg].start_address = markerText[instance * 9 + leg][0] + "<br>instance=" + instance;
response.routes[0].legs[leg].end_address = markerText[instance * 9 + leg + 1][0] + "<br>instance=" + instance;
}
directionsDisplay[instance].setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', calcRoute);
html,
body,
#dvMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<div id="dvMap"></div>
使用相同输入列表进行所有处理的代码段:
var directionsDisplay = [];
var directionsService = [];
var locations = [
['Ahsanabad Chowrangi', 25.001807, 67.123459, 1],
['Allah Wali Chowrangi', 25.007006, 67.076991, 2],
['Shafique Mor', 24.957115, 67.076278, 3],
['Sohrab Goth Flyover', 24.945176, 67.084069, 4],
['Ancholi', 24.940619, 67.080735, 5],
['Water Pump Chowrangi', 24.936648, 67.076211, 6],
['Ayesha Manzil Chowrangi', 24.927262, 67.064335, 7],
['Karimabad Chowrangi', 24.918269, 67.053686, 8],
['Liaquatabad 10 Number Chowrangi', 24.909177, 67.049781, 9],
['Lalo Kheet Daak Khana Chowrangi', 24.900226, 67.044931, 10],
['Teen Hatti Bridge', 24.892076, 67.043592, 11],
['Gurumandar', 24.880923, 67.039432, 12],
['Numaish Chowrangi', 24.872733, 67.035963, 13],
['Jama Cloth Market', 24.859631, 67.015729, 14],
['City Court', 24.854257, 67.006481, 15],
['Tower', 24.848813, 66.996748, 16],
['Nagina Center', 24.825830, 66.979450, 17],
['Kemari No. 1', 24.818366, 66.975126, 18]
];
var map = null;
function calcRoute() {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var pt = new google.maps.LatLng(locations[i][1], locations[i][2]);
bounds.extend(pt);
}
var mapOptions = {
// center: locations[0],
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
map.fitBounds(bounds);
var i = locations.length;
var index = 0;
while (i != 0) {
if (i < 3) {
var tmp_locations = new Array();
for (var j = index; j < locations.length; j++) {
tmp_locations.push(new google.maps.LatLng(locations[j][1], locations[j][2]));
}
drawRouteMap(tmp_locations);
i = 0;
index = locations.length;
}
if (i >= 3 && i <= 10) {
console.log("before :fun < 10: i value " + i + " index value " + index);
var tmp_locations = new Array();
for (var j = index; j < locations.length; j++) {
tmp_locations.push(new google.maps.LatLng(locations[j][1], locations[j][2]));
}
drawRouteMap(tmp_locations);
i = 0;
index = locations.length;
console.log("after fun < 10: i value " + i + " index value " + index);
}
if (i >= 10) {
console.log("before :fun > 10: i value " + i + " index value " + index);
var tmp_locations = new Array();
for (var j = index; j < index + 10; j++) {
tmp_locations.push(new google.maps.LatLng(locations[j][1], locations[j][2]));
}
drawRouteMap(tmp_locations);
i = i - 9;
index = index + 9;
console.log("after fun > 10: i value " + i + " index value " + index);
}
}
}
function drawRouteMap(routelocations) {
var start, end;
var waypts = [];
for (var k = 0; k < routelocations.length; k++) {
if (k >= 1 && k <= routelocations.length - 2) {
waypts.push({
location: routelocations[k],
stopover: true
});
}
if (k == 0) start = routelocations[k];
if (k == routelocations.length - 1) end = routelocations[k];
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
console.log(request);
directionsService.push(new google.maps.DirectionsService());
var instance = directionsService.length - 1;
directionsDisplay.push(new google.maps.DirectionsRenderer({
preserveViewport: true
}));
directionsDisplay[instance].setMap(map);
directionsService[instance].route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
console.log(status);
for (var leg = 0; leg < response.routes[0].legs.length; leg++) {
response.routes[0].legs[leg].start_address = locations[instance * 9 + leg][0] + "<br>instance=" + instance;
response.routes[0].legs[leg].end_address = locations[instance * 9 + leg + 1][0] + "<br>instance=" + instance;
}
directionsDisplay[instance].setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', calcRoute);
html,
body,
#dvMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<div id="dvMap"></div>
(fiddle)