google maps api .... отображение маркера в информационном окне по ссылке за пределами карты - PullRequest
Новая
       1

google maps api .... отображение маркера в информационном окне по ссылке за пределами карты

5 голосов
/ 27 февраля 2012

Я пытаюсь построить интерактивную карту, используя Google Map API v3. Идея состоит в том, чтобы заполнить список маркеров на карте текстом, используя asp.

Создание карты, исходных маркеров и содержимого было простым, но теперь я хотел бы получить список ссылок на различные маркеры вне карты. Если щелкнуть элемент в списке, я бы хотел, чтобы он переместился в указанное место и открыл соответствующее текстовое поле (информационное окно).

Все работает, кроме того, что я не могу открыть информационное окно. Кто-нибудь может подсказать, что я тут делаю не так? 

<script type="text/javascript">
  var MapStart = new google.maps.LatLng(32.036020,34.760742);
  var marker;
  var map;
    var infowindow = new google.maps.InfoWindow();      

  function initialize() {
    var mapOptions = {
      zoom: 2,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: MapStart
    };

    map = new google.maps.Map(document.getElementById("map"),
            mapOptions);

<%
varCount = 0
while not rsListItem.EOF
  varCount = varCount + 1 
  varLong = rsListItem.Fields.Item("custom_text1").Value
  varLat = rsListItem.Fields.Item("custom_text2").Value
%> 
  var marker<%=varCount%> = new google.maps.Marker({
    position: new google.maps.LatLng(<%=varLong%>,<%=varLat%>),
    map: map,
    animation: google.maps.Animation.DROP,
    title : "<%=rsListItem.Fields.Item("heading").Value%>"
  });

  google.maps.event.addListener(marker<%=varCount%>, 'click', function() {
    map.panTo(new google.maps.LatLng(<%=varLong%>, <%=varLat%>));
    infowindow.setContent('<%=(rsListItem.Fields.Item("brief").Value)%>');
    infowindow.open(map,marker<%=varCount%>);
  });
<%
  rsListItem.MoveNext()
Wend

rsListItem.Close()
Set rsListItem = Nothing

%>
}

$(document).ready(function() {
    $("#map_list ul li").click(function() {
        markerID = this.id;
        markerContent = $("div.marker_brief",this).html();
        varLong = $("div.marker_long",this).html();
        varLat = $("div.marker_lat",this).html();
        map.panTo(new google.maps.LatLng(varLong, varLat));
        infowindow.setContent(markerContent)
        infowindow.open(map,markerID);

  }); 
}); 
</script>

<div id="map"></div>
<div id="map_list">
<ul>
<%
  vtype=100160
  Call ListItem(vtype,langId)
  varCount = 0
  while not rsListItem.EOF
    varCount = varCount + 1 
    varLong = rsListItem.Fields.Item("custom_text1").Value
    varLat = rsListItem.Fields.Item("custom_text2").Value
%>
    <li id="marker<%=varCount%>"><%=rsListItem.Fields.Item("heading").Value%>
        <div class="marker_brief"><%=rsListItem.Fields.Item("brief").Value%></div>
        <div class="marker_long"><%=varLong%></div>
        <div class="marker_lat"><%=varLat%></div>
    </li>
<%
    rsListItem.MoveNext()
  Wend
  rsListItem.Close()
  Set rsListItem = Nothing
%>
</ul>           
</div>

1 Ответ

5 голосов
/ 27 февраля 2012

Вам нужно хранить свои маркеры в массиве, который можно использовать позже.Прямо сейчас код 

markerID = this.id;

просто будет установлен на "marker1", на самом деле это не маркерный объект.Вам необходимо создать коллекцию маркеров: 

var markers = new Array();

После создания маркера его необходимо сохранить в массиве: 

markers.push(marker);

Когда ваш элемент <li> получает щелчокСобытие, которое необходимо извлечь из массива маркеров: 

marker = markers[this.id];

Вот рабочий пример: 

<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var MapStart = new google.maps.LatLng(38.634036,-111.785889);

  var markers;
  var map;
    var infowindow = new google.maps.InfoWindow();

  function initialize() {
    markers = new Array();
    var mapOptions = {
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: MapStart
    };

    map = new google.maps.Map(document.getElementById("map"),
            mapOptions);

    $("#map_list ul li").each(function(index) {

        var marker = new google.maps.Marker({
        position: new google.maps.LatLng($(this).children(".marker_long").text(), $(this).children(".marker_lat").text()),
        map: map,
        animation: google.maps.Animation.DROP,
        title : $(this).children(".marker_title").text(),
        brief: $(this).children(".marker_brief").text()
        });

        google.maps.event.addListener(marker, 'click', function() {
          map.panTo(new google.maps.LatLng(marker.position.Sa, marker.position.Ta));
          infowindow.setContent(marker.brief);  
          infowindow.open(map,marker);
        });

        markers.push(marker);
    });
  }

$(document).ready(function(){
  $("#map_list ul li").click(function(){
        marker = markers[this.id];
        markerContent = $("div.marker_brief",this).html();
        varLong = $("div.marker_long",this).html();
        varLat = $("div.marker_lat",this).html();
        map.panTo(new google.maps.LatLng(varLong, varLat));
        infowindow.setContent(markerContent)
        infowindow.open(map,marker);

  });
});
</script>
</head>
<body onload='initialize();'>
<div id="map" style="width: 450px; height: 350px;"></div>
<div id="map_list">
<ul>
<li id="0">
    <div class="marker_title">Salt Lake City</div>
    <div class="marker_brief">Capital of Utah</div>
    <div class="marker_long">40.763901</div>
    <div class="marker_lat">-111.901245</div>
</li>
<li id="1">
    <div class="marker_title">Provo</div>
    <div class="marker_brief">Location of BYU</div>
    <div class="marker_long">40.25228</div>
    <div class="marker_lat">-111.659546</div>
</li>
</ul>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...