2012-02-23 13 views
5

Todo, Tengo el siguiente código para mostrar mis marcadores en mis mapas:número de visualización en Google Maps Marcador para

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function'){ 
    window.onload = func 
} else { 
    window.onload = function() { 
     oldonload(); 
     func(); 
    } 
} 
} 

var map, 
    infowin=new google.maps.InfoWindow({content:'moin'}); 
function loadMap() 
{ 
    map = new google.maps.Map(
    document.getElementById('map'), 
    { 
     zoom: 12, 
     mapTypeId:google.maps.MapTypeId.ROADMAP, 
     center:new google.maps.LatLng(<?php echo $_SESSION['pav_event_latitude']; ?>, 
            <?php echo $_SESSION['pav_event_longitude']; ?>) 
    }); 

    addPoints(myStores); 
} 

function addPoints(points) 
{ 
    var bounds=new google.maps.LatLngBounds(); 
    for (var p = 0; p < points.length; ++p) 
    { 
    var pointData = points[p]; 
    if (pointData == null) {map.fitBounds(bounds);return; } 
    var point = new google.maps.LatLng(pointData.latitude, pointData.longitude); 
    bounds.union(new google.maps.LatLngBounds(point)); 
    createMarker(point, pointData.html); 
    } 
    map.fitBounds(bounds); 

} 

function createMarker(point, popuphtml) 
{ 
    var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>"; 
    var marker = new google.maps.Marker(
    { 
     position:point, 
     map:map 
    } 
); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowin.setContent(popuphtml) 
     infowin.open(map,marker); 
    }); 

} 
function Store(lat, long, text) 
{ 
    this.latitude = lat; 
    this.longitude = long; 
    this.html = text; 
} 

var myStores = [<?php echo $jsData;?>, null]; 
addLoadEvent(loadMap); 
</script> 

Esto funciona muy bien. Sin embargo, intento decir agregar un número sobre el marcador para que las personas puedan relacionar el número en mi sitio con el marcador en Google Maps. ¿Cómo puedo crear el número encima de mis marcadores (en la parte superior del icono real y no en una burbuja de información)?

¡Cualquier ayuda sería muy apreciada! ¡Gracias por adelantado!

+0

haga clic en el enlace del marcador podemos dar el número? Pero no encuentro formas de tener el número de superposición en el icono –

Respuesta

7

EDIT: Esta API ahora está en desuso, y ya no puedo recomendar esta respuesta.


Puede utilizar la API de Gráficos de Google para generar una imagen de PIN.

Ver: http://code.google.com/apis/chart/infographics/docs/dynamic_icons.html#pins

Se va a hacer y devolver una imagen de un marcador a partir de los parámetros especificados. Un ejemplo de uso sería: https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=2|FF776B|000000

para implementarlo en su mapa de Google, se puede añadir en el nuevo marcador() Código:

var number = 2; // or whatever you want to do here 
var marker = new google.maps.Marker(
    { 
     position:point, 
     map:map, 
     icon:'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+number+'|FF776B|000000', 
     shadow:'https://chart.googleapis.com/chart?chst=d_map_pin_shadow' 
    } 
); 
+0

Esto funciona bien, pero ¿cómo puedo pasar mi función createMarker a una variable dinámica de qué número mostrar? Eso funciona muy bien si tiene un código difícil en el número 2, pero no estoy seguro de cómo pasar el número correcto a la función. – user1048676

+0

@ user1048676 Para empezar, parece que podría agregar otro parámetro a su función 'addMarker()', por lo que se convierte en algo 'function createMarker (point, popuphtml, number)'. En cuanto a dónde obtienes el número para pasar, puedes usar el iterador 'p' en la función' addPoints'. Entonces, 'createMarker (point, pointData.html, p);' Sin embargo, si necesita que el número sea coherente con su PHP (por ejemplo, si eso está dando como resultado en otra parte de la página, como suena), entonces puede necesitar para reflejar eso en su ' ', y usa una propiedad numérica, pasándola como html. – Rick

+0

@Rick, aunque es una buena solución, la [parte de Infographics de la API de Google Charts] (https://developers.google.com/chart/infographics/) (su enlace anterior) ha quedado obsoleta. – johntrepreneur

1

Here es un servicio similar a uno descrito por Rick - pero sigue activo y puede cargar su propia imagen de marcador.

Cuestiones relacionadas