在谷歌地图多个标记 [英] Multiple Markers on a Google Map

查看：148 发布时间：2016/5/22 21:59:51 asp.net javascript vb.net api google-maps

本文介绍了在谷歌地图多个标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我增加了一个谷歌地图有两个标记（我只是测试），在code是：

 函数的load（）{    VAR地图=新的GMap2（的document.getElementById（地图））;
    变种标记=新的GMarker（新的GLatLng（小于％=坐标％GT））;
    VAR MARKER2 =新的GMarker（新的GLatLng（31.977211,35.951729））;
    VAR HTML =＆LT;％= maptitle％GT;＆LT; BR /＆gt;中+
         ＆LT;％=文本％GT;
    VAR HTML2 =＆LT; IMG SRC ='simplemap_logo.jpg'宽= '20'高度= '20'/＆gt;中+
         ＆LT;％= maptitle％GT;＆LT; BR /＆gt;中+
         ＆LT;％=文本％GT; +阿尔珀
    map.setCenter（新的GLatLng（小于％=坐标％1+），5）;
    map.setMapType（G_HYBRID_MAP）;
    map.addOverlay（标记）;
    map.addOverlay（MARKER2）;
    map.addControl（新GLargeMapControl（））;
    map.addControl（新GScaleControl（））;
    map.addControl（新GMapTypeControl（））;
    marker.openInfoWindowHtml（HTML）;
    marker2.openInfoWindowHtml（HTML2）;
    }

问题是，只有一个标记文本显示（白色三角形里面的文字），另一种是不可见的，为什么呢？
另一件事，我有地图的表，它像：的azazaz，mapCoordinates，mapMarkerTitle，mapMarkerText，我可以检索这个表，但我想一个办法能够将其所有记录传递给我的javascript，并创建一个标记为每个地图我在我的表，我知道这是两大部分，但任何人都可以建议或帮助我的code？因为我什么都不知道的javascript：D

HTML输出是：

 ＆LT;！DOCTYPE HTML PUBLIC -  // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/ XHTML1-transitional.dtd＆GT;＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;＆LT;标题＆GT;
    无标题页
＆LT; /标题＆GT;
    ＆LT;脚本src=\"http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAANgu3GlobW5KtQorgXrnJ_xTHM4EYhrvsce8mdg4KdiCoPfCQKxSOZ_5sjy4O31twg6cxfZqam24TCw\"
      类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本类型=文/ JavaScript的＆GT;     功能负荷（）{    VAR地图=新的GMap2（的document.getElementById（地图））;
    VAR的标记=新的GMarker（新的GLatLng（32.523251,35.816068））;
    VAR MARKER2 =新的GMarker（新的GLatLng（31.977211,35.951729））;
    VAR HTML =maen＆LT; BR /＆gt;中+
         maen tamemi
    VAR HTML2 =＆LT; IMG SRC ='simplemap_logo.jpg'宽= '20'高度= '20'/＆gt;中+
         maen＆LT; BR /＆gt;中+
         maen tamemi+阿尔珀;
    map.setCenter（新的GLatLng（32.523251,35.816068），5）;
    map.setMapType（G_HYBRID_MAP）;
    map.addOverlay（标记）;
    map.addOverlay（MARKER2）;
    map.addControl（新GLargeMapControl（））;
    map.addControl（新GScaleControl（））;
    map.addControl（新GMapTypeControl（））;    marker2.openInfoWindowHtml（HTML2）;
    marker.openInfoWindowHtml（HTML）;
    }    //]]＆GT;
    ＆LT; / SCRIPT＆GT;    ＆LT;脚本类型=文/ JavaScript的＆GT;      功能页面加载（）{
      }    ＆LT; / SCRIPT＆GT;＆LT; /头＆GT;
＆LT;身体的onload =load（）的＆GT;
    ＆LT;表格名称=Form1的方法=邮报行动=Xhome.aspxID =form1的＆GT;
＆LT; DIV＆GT;
＆LT;输入类型=隐藏的名字=__ VIEWSTATEID =__ VIEWSTATEVALUE =/ wEPDwUJNDI5NDcxNTY4ZGTjxbb38769ZB2N9Ow9kAzPz2PIqA ==/＆GT;
＆LT; / DIV＆GT;    ＆LT; DIV ID =地图的风格=宽度：400像素，高度：300像素＆GT;    ＆LT; / DIV＆GT;
    ＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

解决方案

在回答你问题的第二部分：

我想一个办法能够将其所有记录传递给我的javascript，并创建一个标记为每个地图，我有我的表

我（作为一个例子 - 写在一年多以前）以下的code：

在code-后面我有这样的事情（C＃恐怕）：

  [的WebMethod]
公共LatitudeLogitudeMessage [] GetPoints（字符串后codeS）
{
字符串[]交codeARRAY =交codes.Split（，ToCharArray（））;LatitudeLogitudeMessage [] = pointArray
                   新LatitudeLogitudeMessage [交codeArray.Length]。
INT索引= 0;
的foreach（在岗codeARRAY字符串后code）
{
pointArray [指数] =用GetPoint（后code）;
指数++;
}返回pointArray;
}

LatitudeLogitudeMessage是一个自定义类，它看起来像这样：

 公共类LatitudeLogitudeMessage
{
公共小数？纬度{搞定;组; }
公共小数？经度{搞定;组; }
公共字符串消息{搞定;组; }
公共字符串详细信息{获得;组; }
公共字符串地址{搞定;组; }公共LatitudeLogitudeMessage（字符串addressToFind）
{
地址= addressToFind;
详细= addressToFind.Replace（，，，＆所述峰; br /＆gt;中）;
}
}

本的GetPoint方法bascially填补了这些细节。

在code盈然后我有：

  PageMethods.GetPoints（地址，showPoints）;

其中呼吁code后面的GetPoints方法，并且将结果传递给showPoints：

 函数showPoints（latLongs）
{
  GLog.write的（显示点）;
  VAR点= [];
  VAR的LatLngBounds =新GLatLngBounds（）;  对于（VAR I = 0; I＆LT; latLongs.length;我++）
  {
    如果（== latLongs [I] .Message）
    {
      点[I] =新的GLatLng（latLongs [I] .Latitude，latLongs [I] .Longitude）;
      VAR的标记=
            新的GMarker（分[I] {标题：latLongs [I] .Details，可点击：假}）;
      map.addOverlay（标记）;
      latLngBounds.extend（分[I]）;
    }
    其他
    {
      GLog.write的（latLongs [I] .Message）;
    }
  }  如果（points.length→1）
  {
    VAR边界=新GBounds（点）;
    VAR中心=新的GLatLng（
         （latLngBounds.getSouthWest（）。纬度（）
           + latLngBounds.getNorthEast（）。纬度（））/ 2，
         （latLngBounds.getSouthWest（）LNG（）
           + latLngBounds.getNorthEast（）液化天然气（））/ 2）。
    变种newZoom = map.getBoundsZoomLevel（的LatLngBounds，map.getSize（））;
    map.setCenter（中心，newZoom）;
  }
  其他
  {
    map.setCenter（分[0]，defaultZoomLevel）;
  }
}

所以，这需要点阵列，并超过他们迭代创建一个标志，因为它的推移，围绕在列表中的第一项（不聪明，但它的工作对我来说）。

I added a google map with two markers (i am just testing), the code is:

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

The problem is, only one markers text is showing (the white triangle with text inside it) the other is not visible, why? Another thing, i have a table of Maps, its like: mapID, mapCoordinates, mapMarkerTitle, mapMarkerText, i can retrieve this table, but i want a way to be able to pass all its records to my javascript and create a Marker for each Map i have in my table, i know this is two much, but can anyone suggest or help me with the code? as i know nothing about javascript :D

The HTML OUTPUT is:

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

解决方案

In response to the second part of your question:

i want a way to be able to pass all its records to my javascript and create a Marker for each Map i have in my table

I have (as an example - written a year or so ago) the following code:

In the code-behind I have something like this (c# I'm afraid):

[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 is a custom class that looks like this:

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

The GetPoint method bascially fills in those details.

In the code infront I then had:

PageMethods.GetPoints(address, showPoints);

Which calls the GetPoints method on the code behind, and passes the result to 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);
  }
}

So this takes the array of points, and iterates over them creating a marker as it goes, centering on the first item in the list (not clever, but it worked for me).

这篇关于在谷歌地图多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

在谷歌地图多个标记 [英] Multiple Markers on a Google Map

问题描述

相关文章

C#/.NET最新文章

热门教程

热门工具

登录关闭

在谷歌地图多个标记 [英] Multiple Markers on a Google Map

问题描述

相关文章

C#/.NET最新文章

热门教程

热门工具

登录 关闭

登录关闭