为谷歌地图长和拉特选择选项多个值答案

【问题标题】：Select option multiple values for google maps long and latt为谷歌地图长和拉特选择选项多个值
【发布时间】：2014-06-25 00:19:10
【问题描述】：

我有一个出租车预订表格。第一个选择框是选择起点。第二个是终点。两者都有我需要保留的身份证号码的值。

我正在尝试在选择选择值时创建路线。如果我输入 long&latt 来选择选项值，谷歌地图工作正常，绘制目的地。但是我需要将目标 ID 保留为选择选项值中的值，并且将 2 个值放在选项中不起作用。

这是我正在使用的。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var mapCanvas;var directionDisplay;var directionsService;
var stepDisplay;var markerArray=[];
function initialize(){directionsService=new 
google.maps.DirectionsService();
var d=new google.maps.LatLng(0,0);
var a={zoom:12,scrollwheel:false,zoomControl:true,
panControl:false,disableDoubleClickZoom:true,
enableTouchUI:true,mapTypeControl:false,
streetViewControl:false,mapTypeId:google.maps.
MapTypeId.ROADMAP,center:d};
mapCanvas=new google.maps.Map(document.
getElementById("map"),a);var b=[{featureType:"all"}];
mapCanvas.setOptions({styles:b});var c=new google.maps.
Polyline({strokeColor:"#6495ED",strokeOpacity:0.9,
strokeWeight:6});directionsDisplay=new google.maps.
DirectionsRenderer({polylineOptions:c});var k={map:mapCanvas,
suppressMarkers:true,polylineOptions:c};directionsDisplay=new google.maps.DirectionsRenderer(k);calcRoute()}function calcRoute(){for(i=0;i<markerArray.length;i++){
markerArray[i].setMap(null)}markerArray=[];
var b=document.getElementById("start").value;
var c=document.getElementById("end").value;
var a=origin:b,destination:c,travelMode:google.maps.
DirectionsTravelMode.DRIVING};directionsService.route(a,function(f,e){if(e==google.maps.DirectionsStatus.OK){var d=document.getElementById("map_");directionsDisplay.
setDirections(f);showSteps(f)}})}function 
showSteps(e){var a=e.routes[0].legs[0];for(
var c=0;c<a.steps.length;c++){var d="0.png";if(c==0){d="/transfer/1.png"}
var b=new google.maps.Marker({position:a.steps[c].
start_point,map:mapCanvas,icon:d});markerArray.push(b)}var b=new google.maps.Marker({position:a.steps[c-1].
end_point,map:mapCanvas,icon:"/transfer/2.png"});
markerArray.push(b)}google.maps.event.
addDomListener(window,"load",initialize);</script>
</script>

<div id="panel"><center>
<b>Transfer From: </b>
<select id="start" name="start" onchange="calcRoute();">
  <option value='37.24007,27.673273' selected>Bodrum Milas Airport</option>
  <option value="38.297999,27.142523">Izmir Airport</option>
  <option value="36.731378,28.79478">Dalaman Airport</option>
</select>


<b>Transfer To: </b>
<select id="end" name="end" onchange="calcRoute();">
  <option value="37.034419,27.430542" selected>Bodrum</option>
  <option value="37.104419,27.28905">Yalikavak</option>
  <option value="37.003958,27.258495">Turgutreis</option>
</select></center>
</div>
</form>

此表单和脚本工作正常，但我必须输入目标 id 而不是 long&latt。 “转移到”（第二个选择框）正在从数据库中获取所有值并将它们匹配以继续表单的其余部分。

知道如何让地图工作吗？

在我看来，如果我能写一个类似的 JavaScript；

""if select option is A, var.b = 38.4408,27.152535"", ""if B var.b= another long&latt""

并将结果放入地图 js 中的 ""var b=document.getElementById("start").value;""

我想我会让它运行的。谢谢

谢谢

【问题讨论】：

你的 JS 不可读，因为内联写入

标签： javascript google-maps variables

【解决方案1】：

您可以使用其他属性来存储 latLng，例如：

<option value="someID" latlng="37.24007,27.673273">Bodrum Milas Airport</option>

要访问这些属性，请使用：

var b=document.getElementById("start")
 .options[document.getElementById("start").selectedIndex].getAttribute('latLng');

var c=document.getElementById("end")
 .options[document.getElementById("end").selectedIndex].getAttribute('latLng');

【讨论】：