Question

我正在使用“获取路线”功能来创建一个简单的路线搜索脚本，找到两点之间的最佳路线。

当您获得路线时，就会采用以下形式：

Turn left at...

Keep right...

Continue onto...

我想要的是点击这些消息的选项，它会在地图上打开带有信息窗口的标记。问题是信息窗口应包含单击的消息：

当我点击“保持正确...”时，应该在该邮件的坐标上打开一个标记，内容为“保持正确...”。我错过了最后一部分 - 用这样的内容填充标记。

以下是代码的重要部分：

var directionDisplay;
var directionsService;
var map;
var contentString = ???;
var infoWindow;
var marker;
var Here;

function initialize() {
  var rendererOptions = {
    draggable: true
  };
  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  directionsService = new google.maps.DirectionsService();
  Here = new google.maps.LatLng(0, 0);
  var myOptions = {
      zoom: 1,
      center: Here,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: true,
      scaleControl: true
  }
  map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("guide"));
  infoWindow = new google.maps.InfoWindow({
    content: contentString
  });
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.open(map,marker);
  });
}

function calcRoute() {
  var request;
  var so;
  var start = document.getElementById("from").value;
  var end = document.getElementById("to").value;
...
  }
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
...
}

我尝试用一些字符串填充contentString变量，即使是“contentString”，但没有任何反应。

以下是包含说明的行之一的代码：

<tr jseval="setupPanelStep(this, $legIndex, $index)" jsselect="steps" jstcache="12" jsinstance="12">
  <td jscontent="($index + 1) + '.'" class="adp-substep" jstcache="14">13.</td>
  <td jsvalues=".innerHTML:format(instructions)" class="adp-substep" jstcache="15">Continue onto <b jstcache="0">A1</b><div style="font-size: 0.9em;" jstcache="0">Toll road</div></td>
  <td class="adp-substep" jstcache="0"><div jscontent="distance['text']" class="adp-distance" jstcache="16">123 km</div></td>
</tr>

这是向用户显示脚本的代码的一部分：

<form id="Googlemap" style="height:800px;" action="#">
<div style="width:250px; float:left;">
<div class="title">GET DIRECTIONS</div>
<div id="123">
<div style="width:250px; margin-bottom: 5px;"><span style="width:54px; float:left;">FROM</span>
<input type="text" id="from" name="from" />
</div>
<div style="width:250px; margin-bottom: 5px;"><span style="width:54px; float:left;">TO</span>
<input type="text" id="to" name="to" />
</div>
</div>

<div>
<input type="checkbox" id="tolls" /><label for="tolls">Avoid tolls</label>
<input type="checkbox" id="highways" /><label for="highways">Avoid highways</label>
</div>

Answer 1

试试这个：

infoWindow = new google.maps.InfoWindow({
    content: document.getElementById(contentString)
});

其中contentString是HTML元素ID

使用html元素动态填充Google Map中的infowindow（contentString变量）

1 个答案: