Динамическое заполнение информационного окна в Google Map элементом html (переменная contentString) - PullRequest
Новая
       4

Динамическое заполнение информационного окна в Google Map элементом html (переменная contentString)

0 голосов
/ 23 марта 2011

Я использую функцию "получить маршруты", чтобы создать простой скрипт поиска маршрута, который находит лучший маршрут между двумя точками.

Когда вы получаете маршруты, он имеет следующий вид: 

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>

1 Ответ

2 голосов
/ 25 мая 2011

Попробуйте: 

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

, где contentString - идентификатор элемента HTML

...