2009-03-03 3 views
2

я добавил карту Google с двумя маркерами (я просто тестирование), код:Множественные маркеры на карте Google

function load() { 

    var map = new GMap2(document.getElementById("map")); 


    var marker = new GMarker(new GLatLng(<%=coordinates%>)); 
    var marker2 = new GMarker(new GLatLng(31.977211,35.951729)); 
    var html="<%=maptitle%><br/>" + 
     "<%=text%>"; 
    var html2="<img src='simplemap_logo.jpg' width='20' height='20'/> " + 
     "<%=maptitle%><br/>" + 
     "<%=text%>" + "Alper"; 
    map.setCenter(new GLatLng(<%=coordinates%>), 5); 
    map.setMapType(G_HYBRID_MAP); 
    map.addOverlay(marker); 
    map.addOverlay(marker2); 
    map.addControl(new GLargeMapControl()); 
    map.addControl(new GScaleControl()); 
    map.addControl(new GMapTypeControl()); 


    marker.openInfoWindowHtml(html); 
    marker2.openInfoWindowHtml(html2); 
    } 

Проблема заключается в том, только один маркеры текст показывает (белый треугольник с текст внутри него) другой не видно, почему? Другое дело, у меня есть таблица карт, например: mapID, mapCoordinates, mapMarkerTitle, mapMarkerText, я могу получить эту таблицу, но я хочу, чтобы вы могли передавать все свои записи в свой javascript и создавать маркер для каждого Карта у меня в моей таблице, я знаю, что это много, но может ли кто-нибудь предложить или помочь мне с кодом? а я ничего не знаю о JavaScript: D

HTML-ВЫВОДА является:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 
    Untitled Page 
</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAANgu3GlobW5KtQorgXrnJ_xTHM4EYhrvsce8mdg4KdiCoPfCQKxSOZ_5sjy4O31twg6cxfZqam24TCw" 
     type="text/javascript"></script> 

    <script type="text/javascript"> 

    function load() { 

    var map = new GMap2(document.getElementById("map")); 


    var marker = new GMarker(new GLatLng(32.523251,35.816068)); 
    var marker2 = new GMarker(new GLatLng(31.977211,35.951729)); 
    var html="maen<br/>" + 
     " maen tamemi"; 
    var html2="<img src='simplemap_logo.jpg' width='20' height='20'/> " + 
     "maen<br/>" + 
     " maen tamemi" + "Alper"; 
    map.setCenter(new GLatLng(32.523251,35.816068), 5); 
    map.setMapType(G_HYBRID_MAP); 
    map.addOverlay(marker); 
    map.addOverlay(marker2); 
    map.addControl(new GLargeMapControl()); 
    map.addControl(new GScaleControl()); 
    map.addControl(new GMapTypeControl()); 



    marker2.openInfoWindowHtml(html2); 
    marker.openInfoWindowHtml(html); 
    } 

    //]]> 
    </script> 

    <script type="text/javascript"> 

     function pageLoad() { 
     } 

    </script> 

</head> 
<body onload = "load()"> 
    <form name="form1" method="post" action="Xhome.aspx" id="form1"> 
<div> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDI5NDcxNTY4ZGTjxbb38769ZB2N9Ow9kAzPz2PIqA==" /> 
</div> 

    <div id="map" style="width:400px;height:300px" > 

    </div> 
    </form> 
</body> 
</html> 
+0

Можете ли вы дать нам выход html? – cherouvim

+0

проверить это, я отредактировал сообщение – Maen

ответ

1

В ответ на вторую часть вопроса:

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

Я (как пример - написал год назад) следующий код:

В коде-за меня что-то вроде этого (C# я боюсь):

[WebMethod] 
public LatitudeLogitudeMessage[] GetPoints(string postCodes) 
{ 
    string[] postCodeArray = postCodes.Split(",".ToCharArray()); 

    LatitudeLogitudeMessage[] pointArray = 
        new LatitudeLogitudeMessage[postCodeArray.Length]; 
    int index = 0; 
    foreach (string postCode in postCodeArray) 
    { 
     pointArray[index] = GetPoint(postCode); 
     index++; 
    } 

    return pointArray; 
} 

LatitudeLogitudeMessage это пользовательский класс, который выглядит следующим образом:

public class LatitudeLogitudeMessage 
{ 
    public decimal? Latitude { get; set; } 
    public decimal? Longitude { get; set; } 
    public string Message { get; set; } 
    public string Details { get; set; } 
    public string Address { get; set; } 

    public LatitudeLogitudeMessage(string addressToFind) 
    { 
     Address = addressToFind; 
     Details = addressToFind.Replace(",", ",<br />"); 
    } 
} 

Метод GETPOINT Bascially заполняет эти детали.

В коде Infront я тогда был:

PageMethods.GetPoints(address, showPoints); 

Что вызывает метод GetPoints на коде позади, и передает результат showPoints:

function showPoints(latLongs) 
{ 
    GLog.write("Showing points"); 
    var points = []; 
    var latLngBounds = new GLatLngBounds(); 

    for (var i = 0; i < latLongs.length; i++) 
    { 
    if ("" == latLongs[i].Message) 
    { 
     points[i] = new GLatLng(latLongs[i].Latitude, latLongs[i].Longitude); 
     var marker = 
      new GMarker(points[i], {title: latLongs[i].Details, clickable: false}); 
     map.addOverlay(marker); 
     latLngBounds.extend(points[i]); 
    } 
    else 
    { 
     GLog.write(latLongs[i].Message); 
    } 
    } 

    if (points.length > 1) 
    { 
    var bounds = new GBounds(points); 
    var center = new GLatLng(
     (latLngBounds.getSouthWest().lat() 
      + latLngBounds.getNorthEast().lat()) /2., 
     (latLngBounds.getSouthWest().lng() 
      + latLngBounds.getNorthEast().lng()) /2.); 
    var newZoom = map.getBoundsZoomLevel(latLngBounds, map.getSize()); 
    map.setCenter(center, newZoom); 
    } 
    else 
    { 
    map.setCenter(points[0], defaultZoomLevel); 
    } 
} 

Так что это берет массив точек , и итерации по ним, создавая маркер, когда он идет, сосредотачиваясь на первом элементе списка (не умный, но он работал для меня).

1

Попробуйте Marker Manager API, это легче иметь дело с. Вот пример Google:

function setupMap() { 
if (GBrowserIsCompatible()) { 
    map = new GMap2(document.getElementById("map")); 
    map.addControl(new GLargeMapControl()); 
    map.setCenter(new GLatLng(41, -98), 4); 
    window.setTimeout(setupWeatherMarkers, 0); 
} 
} 

function getWeatherMarkers(n) { 
    var batch = []; 
    for (var i = 0; i < n; ++i) { 
    batch.push(new GMarker(getRandomPoint(), 
     { icon: getWeatherIcon() })); 
    } 
    return batch; 
} 

function setupWeatherMarkers() { 
    mgr = new GMarkerManager(map); 
    mgr.addMarkers(getWeatherMarkers(20), 3); 
    mgr.addMarkers(getWeatherMarkers(200), 6); 
    mgr.addMarkers(getWeatherMarkers(1000), 8); 
    mgr.refresh(); 
} 
1

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

Редактировать: Маркеры также автоматически не открывают информационное окно автоматически при нажатии на них. Вам нужно прикрепить обработчик кликов к маркеру, который вызывает метод showInfoWindowHtml. Я использую вспомогательную функцию, которая создает маркер и автоматически добавляет обработчик кликов.

function createMarkerHtml(point, title, html) { 
    var marker = new GMarker(point, { title: title }); 
    GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); 
    return marker; 
} 

map.addOverlay(createMarkerHtml(new GLatLng(<%=coordinates%>), "Marker 1", html)); 
map.addOverlay(createMarkerHtml(new GLatLng(31.977211,35.951729), "Marker 2", html2)); 
+0

Но второй вообще не отображается, я закрываю первый, а второй не появляется, я также нажимаю на тело маркера, он не отображает информацию окно снова, даже не для того, что было показано ... – Maen

Смежные вопросы