如何在同一地图上使用带有多个标记的Google Maps API
-
03-07-2019 - |
题
所以,我有以下脚本来使用谷歌地图API,它很好,但我需要创建一个有多个标记的地图(指向某个东西的气球形图标),我需要每个标记指向地图的不同区域(即不同的坐标),我该怎么做?
<script type="text/javascript">
function load() {
var map = new GMap2(document.getElementById("map"));
var marker = new GMarker(new GLatLng(<%=coordinates%>));
var html="<img src='simplemap_logo.jpg' width='20' height='20'/> " +
"<%=maptitle%><br/>" +
"<%=text%>";
map.setCenter(new GLatLng(<%=coordinates%>), <%=zoom%>)
map.setMapType(G_HYBRID_MAP);
map.addOverlay(marker);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
marker.openInfoWindowHtml(html);
}
//]]>
</script>
还有一个问题,如果我将脚本文本作为变量传递,可以说:
<script type="text/javascript">
<%=ScriptText%>
</script>
和我的<!> lt;%= ScriptText%<!> gt;将是一个字符串,我将构建并将其值分配给名为ScriptText的Friend或Public变量,它是否仍然运行并正常工作? (我这样做是为了让我的脚本动态和不同,基于我如何构建它作为一个STRING,由于我在javascripting的文盲; P)
解决方案
- 将叠加层添加到地图
- 将其添加到GLatLngBounds对象以计算中心点和缩放级别时 醇>
一个或多个数组看起来像一个对象数组,如:
var latlng1 = [
new GLatLng( 48.1234, -120.1234 ),
new GLatLng( 48.5678, -120.5678 ),
new GLatLng( 48.9101, -120.9112 ),
new GLatLng( 48.1121, -120.1314 ),
new GLatLng( 48.3145, -120.1516 ),
new GLatLng( 48.1617, -120.1718 ),
new GLatLng( 48.1819, -120.1920 ),
new GLatLng( 48.2021, -120.2122 )
];
添加标记的代码类似于:
// assume that map1 is an instance of a GMap2 object
// #0 -- google maps api requires us to call setCenter first before calling any other operation on the map
map1.setCenter( new GLatLng( 0, 0 ), 0 );
// #1 -- add markers
for ( var i = 0; i < latlng1.length; i++ )
{
var marker = new GMarker( latlng1[ i ] );
map1.addOverlay( marker );
}
// #2a -- calculate center
var latlngbounds = new GLatLngBounds( );
for ( var i = 0; i < latlng1.length; i++ )
{
latlngbounds.extend( latlng1[ i ] );
}
// #2b -- set center using the calculated values
map1.setCenter( latlngbounds.getCenter( ), map1.getBoundsZoomLevel( latlngbounds ) );
关于在客户端javascript中使用服务器端脚本的问题,是的,您可以将它们混合在一起。根据您的描述判断,我认为这是您需要做的事情:
<script type="text/javascript">
var latlng1 = new Array( );
</script>
<script type="text/javascript">
<%
do until rs.eof
%>
latlng1.push( new GLatLng( parseFloat( '<%= rs( "Lat" ) %>' ), parseFloat( '<%= rs( "Lng" ) %>' ) ) );
<%
rs.movenext
loop
%>
</script>
我发表了一篇文章: http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html
其他提示
您需要创建一个新的 GMarker
对于您要在地图上标记的每个地方。对于GLatLng
s,此处提供了很好的文档。
要创建<=>,您将从文档中看到您首先需要创建一个<=>来表示要删除标记的位置。你没有提到想要气球中的任何内容,所以我假设它只是你所追求的标记。在您的情况下,代码可能看起来像这样:
var markerCoords = [
new GLatLng(<latitude>, <longitude>),
new GLatLng(<latitude>, <longitude>),
[...]
];
for (coord in markerCoords){
map.addOverlay(new GMarker(coord));
};
我确信你可以准确地告诉我这里发生了什么,但为了以防万一,我创建了一个<=>对象数组(这可以是任何长度[在界限内哈哈]),然后迭代它,为数组中定义的每个<=>添加标记到地图。
如果您打算创建大量标记,您可能会发现使用标记管理器,可以同时加速渲染大量标记(如果屏幕的某个区域有很多区域,则不会渲染屏幕外标记并缩小屏幕标记)
<代码> var markersBounds = GLatLngBounds(); var coord = null; for(coord in markerCoords){ coord = new GMarker(coord); map.addOverlay(); markersBounds.extend(坐标); }; 代码>
<代码>var markersCenter = markersBounds.getCenter();
var markersZoom = G_HYBRID_MAP.getBoundsZoomLevel(markersBounds);
map.setCenter(markersCenter, markersZoom);
代码> <代码> 代码>
我对G_HYBRID_MAP不是100%肯定。 getBoundsZoomLevel ,但如果我没记错的话,G_HYBRID_MAP是 GMapType 。
我有类似的东西,但事件不起作用。我可以在对象的构造函数中添加侦听器吗?
//Localization object onstructor
function Localization(width, height, description, img_source){
this.point = new GLatLng(width, height);
this.marker = new GMarker(this.point);
this.description = description;
this.img_source = img_source;
GEvent.addListener(this.marker, "click", function(){marker.openInfoWindowHtml(this.description);});
}
//map localizations to show on map
var localizations = [
new Localization( 52.9015797, 15.2602200, 'Poznań1', 'eye1' ),
new Localization( 52.9025797, 15.1602200, 'Poznań2', 'eye2' ),
new Localization( 52.9035797, 15.2702200, 'Poznań3', 'eye3' ),
new Localization( 52.9045797, 15.2102200, 'Poznań4', 'eye4' ),
]
var map = new GMap2(document.getElementById("mapa"));
map.setCenter(localizations[3].point, 13);
map.setUIToDefault();
for(i=0; i < localizations.length; i++){
localization=localizations[i];
map.addOverlay(localization.marker);
localization.marker.openInfoWindowHtml(localization.description);
}