我有这个代码，允许用户进入两个城市，并显示给定输入的位置。但我想要的是展示从第一个城市到另一个城市的方向。怎么做？
这是我的练习代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBQ8OCC8En5vNHod25Ov3Qs5E1v7NPRSsg&sensor=true">
</script>
<script type="text/javascript">
var geocoder;
var map;
function initialize1() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 100.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function initialize() {
// add mapOptions here to the values in the input boxes.
var mapOptions = {
center: new google.maps.LatLng(-34.397, 100.644),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
geocoder = new google.maps.Geocoder();
addAddress(document.getElementById('from').value);
addAddress(document.getElementById('to').value);
}
function addAddress(place) {
var address = place;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
</head>
<body>
From: <input id="from" type="text" name="From"><br>
To: <input id="to" type="text" name="To"><br>
<button type="button" onclick="initialize()">View example (map-simple.html)</button>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
感谢
杰森
答案 0 :(得分：0)
如果你的意思是＆＃34;位置＆＃34;表示您可以使用方向渲染器的地址，如下所示，以获取方向。 首先将两个标记的位置地址存储到两个文本框中，如果要显示带有id ##和#destination的往返地址，请按照以下代码
$("#find").click(function () {
starting = $("#from").val();
finishing = $("#destination").val();
$("#map").gmap3(
{
action: 'getRoute',
options: {
origin: starting,
destination: finishing,
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function (results) {
if (!results) {
alert("returning")
return
};
$(this).gmap3(
{
action: 'addDirectionsRenderer',
options: {
preserveViewport: true,
draggable: false,
directions: results
}
}
);
}
})
})
答案 1 :(得分：0)
说明：首先我创建了两个不同位置和不同数据的标记，然后在任何标记的dragend之后会有infowindow显示地址和两个按钮的开始和结束。我想你已经完成了这一部分。 所以在此之后我使用了两个文本框，这些文本框将根据单击的开始按钮或完成按钮填充。 在此之后，如果用户单击查找按钮，则此文本框值用于查找两个标记之间的方向 注意：“在这里，您可以使用任何标记来进行或者只有您必须保持的区别是更改单击的按钮，即开始或结束......” “你甚至可以直接在文本框中输入地址并查找它们之间的路线” 这里对于整个操作，我在这里使用gmap3是下面的代码，可以帮助你
<script type="text/javascript">
window.onload = clear;
function clear() {
$("#from").val(null)
$("#destination").val(null)
}
$(document).ready(function () {
var starting = "";
var finishing = "";
$("#find").click(function () {
starting = $("#from").val();
finishing = $("#destination").val();
$("#map").gmap3(
{
action: 'getRoute',
options: {
origin: starting,
destination: finishing,
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function (results) {
if (!results) {
alert("returning")
return
};
$(this).gmap3(
{
action: 'addDirectionsRenderer',
options: {
preserveViewport: true,
draggable: false,
directions: results
}
}
);
}
})
})
$("#map").gmap3({
action: 'addMarkers',
markers: [ //markers array
{lat: 22.74, lng: 83.28, data: 'madhu' },
{ lat: 17.74, lng: 82.28, data: 'raghu' }
],
map: { // this is for map options not for any markers
center: [17.74, 83.28],
zoom: 5
},
marker: {
options: {
draggable: true
},
events: {// marker events
dragend: function (marker, event, data) {
var contentString = '<div id="main content">'
+ '<input type="button" id="start" value="start" />'
+ '<input type="button" id="finish" value="finish" />'
+ '</div>';
//get address on click event
$(this).gmap3({
action: 'getAddress',
latLng: marker.getPosition(),
callback: function (results) {
var map = $(this).gmap3('get'),
infowindow = $(this).gmap3({ action: 'get', name: 'infowindow' })
if (infowindow) {
content = results && results[1] ? results && results[1].formatted_address : 'no address';
infowindow.open(map, marker);
infowindow.setContent(content + contentString);
}
else {
content = results && results[1] ? results && results[1].formatted_address : 'no address';
$(this).gmap3({
action: 'addinfowindow',
anchor: marker,
options: { content: content + contentString },
events: {
domready: function () {
$("#start").click(function () {
alert("start clicked " + content);
$("#from").val(content);
starting = content;
check();
})
$("#finish").click(function () {
alert("finish clicked " + content);
$("#destination").val(content);
finishing = content;
})
}
}
});
}
}
});
},
}
},
});
});
</script>
这是上面
的html部分 <div id="headinput">
<input type="text" value="enter from" id="from" />
<input type="text" value="enter destination" id="destination" />
<input type="button" value="find" id="find" />
</div>
<br />
<div id ="map"style="width: 100%; top: auto; left: auto; position: relative; height: 600px; float:left" ></div>
这是完美的工作，我在firefox浏览器中检查过........：D
答案 2 :(得分：0)