Vários marcadores em um mapa do Google
-
03-07-2019 - |
Pergunta
Eu adicionei um mapa do Google com dois marcadores (estou apenas testando), o código é:
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);
}
O problema é que apenas um texto dos marcadores está mostrando (o triângulo branco com texto dentro dele), o outro não é visível, por quê? Outra coisa, eu tenho uma tabela de mapas, é como: mapid, mapcoordinates, mapmarkertitle, mapmarkertext, posso recuperar esta tabela, mas quero uma maneira de poder passar todos os seus registros para o meu javascript e criar um marcador para cada mapa Eu tenho na minha mesa, sei que isso é muito dois, mas alguém pode sugerir ou me ajudar com o código? Como eu não sei nada sobre JavaScript: D
A saída 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&v=2&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>
Solução
Em resposta à segunda parte da sua pergunta:
Eu quero uma maneira de poder passar todos os seus registros para o meu javascript e criar um marcador para cada mapa que tenho na minha mesa
Eu tenho (como exemplo - escrito há um ano ou mais) o seguinte código:
No código-behind, eu tenho algo assim (C#, receio):
[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 é uma aula personalizada que se parece com a seguinte:
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 />");
}
}
O método getPoint preenche basicamente esses detalhes.
No código na frente, eu tive:
PageMethods.GetPoints(address, showPoints);
Que chama o método getPoints no código por trás e passa o resultado para mostrar pontos:
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);
}
}
Portanto, isso leva a variedade de pontos e itera sobre eles, criando um marcador, centrando -se no primeiro item da lista (não inteligente, mas funcionou para mim).
Outras dicas
Tente o API do Gerente de Marcador, é mais fácil lidar. Aqui está o exemplo do 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();
}
Eu não acho que o Google Maps possa mostrar mais de uma janela de informações por vez; portanto, quando você abre o segundo, o primeiro fecha.
Editar: Os marcadores também não abrem automaticamente a janela de informações automaticamente quando você clica neles. Você precisa anexar um manipulador de clique ao marcador que chama o método ShowInFowindowhtml. Eu uso uma função auxiliar que cria um marcador e adiciona o manipulador de cliques automaticamente.
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));