2009-03-03 14 views
2

J'ai ajouté une carte Google avec deux marqueurs (je teste seulement), le code est:marqueurs multiples sur une carte Google Map

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); 
    } 

Le problème est, un seul texte des marqueurs montre (triangle blanc texte à l'intérieur) l'autre n'est pas visible, pourquoi? Une autre chose, j'ai une table de Maps, c'est comme: mapID, mapCoordinates, mapMarkerTitle, mapMarkerText, je peux récupérer cette table, mais je veux un moyen de pouvoir passer tous ses enregistrements à mon javascript et créer un marqueur pour chaque Carte que j'ai dans ma table, je sais que c'est deux beaucoup, mais quelqu'un peut-il suggérer ou m'aider avec le code? comme je ne sais rien à propos de javascript: D

La sortie HTML est:

<!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

Pouvez-vous nous donner la sortie html produite? – cherouvim

+0

vérifier, j'ai édité le poste – Maen

Répondre

1

En réponse à la deuxième partie de votre question:

je veux un moyen d'être en mesure de transmettre tous ses dossiers à mon javascript et créer un marqueur pour chaque carte que j'ai dans ma table

Je (à titre d'exemple - écrit un an auparavant) le code suivant:

Dans le code-behind je quelque chose comme ça (C# Je crains):

[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 est une classe personnalisée qui ressemble à ceci:

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 />"); 
    } 
} 

La méthode GetPoint remplissages bascially dans ces détails.

Dans le code Infront je puis avait:

PageMethods.GetPoints(address, showPoints); 

Ce qui appelle la méthode GetPoints sur le code derrière et passe le résultat à 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); 
    } 
} 

donc cela prend le tableau de points , et itère sur eux créant un marqueur comme il va, en se concentrant sur le premier élément de la liste (pas intelligent, mais cela a fonctionné pour moi).

1

Essayez le Marker Manager API, il est plus facile à traiter. Voici l'exemple de 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

Je ne pense pas que Google Maps peut afficher plus d'une fenêtre d'information à un moment, alors quand vous ouvrez la seconde, la première ferme.

Editer: Les marqueurs n'ouvrent pas automatiquement la fenêtre d'information automatiquement lorsque vous cliquez dessus. Vous devez attacher un gestionnaire de clic au marqueur qui appelle la méthode showInfoWindowHtml. J'utilise une fonction d'aide qui crée un marqueur et ajoute le gestionnaire de clic automatiquement.

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

Mais le second n'est pas montré du tout, je ferme le premier et le second n'apparaît pas, je clique aussi sur le corps du marqueur lui-même, il ne montre pas l'information fenêtre encore, pas même pour celui qui avait l'habitude de montrer ... – Maen

Questions connexes