Marcatori multipli su una mappa di Google

StackOverflow https://stackoverflow.com/questions/606515

Domanda

Ho aggiunto una mappa di Google con due marcatori (sto solo testando), il codice è: 

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

Il problema è che solo un marcatore mostra il testo (il triangolo bianco con dentro il testo) l'altro non è visibile, perché? Un'altra cosa, ho una tabella di Maps, è come: mapID, mapCoordinates, mapMarkerTitle, mapMarkerText, posso recuperare questa tabella, ma voglio un modo per poter passare tutti i suoi record al mio javascript e creare un indicatore per ogni mappa ho nella mia tabella, so che sono due, ma qualcuno può suggerirmi o aiutarmi con il codice? come non so nulla di javascript: D

L'output 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>
È stato utile?

Soluzione

In risposta alla seconda parte della tua domanda:

  

Voglio un modo per essere in grado di passare tutti i suoi record al mio javascript e creare un indicatore per ogni mappa che ho nella mia tabella

Ho (ad esempio - scritto circa un anno fa) il seguente codice:

Nel code-behind ho qualcosa del genere (c # temo): 

[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 è una classe personalizzata che assomiglia a questa: 

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

Il metodo GetPoint inserisce sostanzialmente questi dettagli.

Nel codice davanti ho avuto: 

PageMethods.GetPoints(address, showPoints);

Che chiama il metodo GetPoints sul codice dietro e passa il risultato a 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);
  }
}

Quindi questo prende l'array di punti e scorre su di essi creando un marker mentre procede, centrando il primo elemento nell'elenco (non intelligente, ma ha funzionato per me).

Altri suggerimenti

Prova API Marker Manager , è più facile gestirlo . Ecco l'esempio di 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();
}

Non credo che Google Maps possa mostrare più di una finestra informativa alla volta, quindi quando apri la seconda, la prima si chiude.

Modifica: gli indicatori non aprono automaticamente automaticamente la finestra delle informazioni quando fai clic su di essi. Devi collegare un gestore di clic al marcatore che chiama il metodo showInfoWindowHtml. Uso una funzione di supporto che crea un marcatore e aggiunge automaticamente il gestore di clic. 

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));
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top