谷歌地图上的多个标记
Posted
技术标签:
【中文标题】谷歌地图上的多个标记【英文标题】：Multiple Markers on a Google Map 【发布时间】：2010-10-11 00:40:34 【问题描述】：我添加了一个带有两个标记的谷歌地图（我只是在测试），代码是：
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&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>
【问题讨论】：
你能把生成的html输出给我们吗？ 看看，我编辑了帖子 【参考方案1】：试试Marker Manager API，它更容易处理。这是谷歌的例子：
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();
【讨论】：
【参考方案2】：我认为 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));
【讨论】：
但是第二个根本没有显示，我关闭第一个并且第二个没有出现，我也点击了标记体本身，它不再显示信息窗口，甚至不是曾经展示过的那个……【参考方案3】：针对您问题的第二部分：
我想要一种能够将其所有记录传递给我的 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 方法基本上填充了这些细节。
然后在前面的代码中：
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);
所以这需要点数组，并在它们上迭代创建一个标记，以列表中的第一项为中心（不聪明，但它对我有用）。
【讨论】：
以上是关于谷歌地图上的多个标记的主要内容，如果未能解决你的问题，请参考以下文章