如何使用多个标记谷歌地图API在同一个地图上 [英] How to use google maps API with multiple markers on the same map
问题描述
所以,我有以下脚本使用谷歌地图API,其所有的罚款,但我需要创建一个地图,有多个标记(气球状图标指向的东西),我需要每个这些标记的点在地图上(即不同坐标),我该怎么办呢?
So, i have the following script to use the google maps API, its all fine, but i need to create a map that has more than one Marker (the balloon shaped icon pointing to something) and i need each of those markers to point on a different area of the map (i.e. different coordinates), how can i do it?
<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>
还有一个问题,如果我通过脚本文本作为一个变量,可以说是这样的:
One more question, if i pass the Script text as a variable, lets say something like:
<script type="text/javascript">
<%=ScriptText%>
</script>
和我&LT;%= ScriptText%>将是一个字符串,我将建立和它的值分配给朋友或称为ScriptText公共变量,将它仍然运行和正常工作? (我这样做是为了让我的脚本动态的,不同的基础上如何构建它作为一个字符串,由于我在JavaScript编程文盲; P)
and my <%=ScriptText%> will be a string which i will build and assign its value to a Friend or Public variable called ScriptText, will it still run and work properly? (i am doing this to make my script dynamic and different based on how i build it as a STRING, due to my illiteracy in javascripting ;P)
推荐答案
obeattie和gregers都是正确的。一般情况下,你需要标记参数存储在某些类型的数组,你将在-至少两次以后使用:
obeattie and gregers are both right. In general, you need to store the marker parameters in some kind of array which you will later use at-least twice:
- 叠加增加了地图时
- ,当它加入到一个GLatLngBounds对象来计算的中心点和缩放级别
数组或标志会是什么样子对象的数组,是这样的:
The array or markers would look like an array of objects, something like:
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 )
];
在code添加标记看起来类似于:
The code for adding markers would look something similar to:
// 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内的服务器端脚本的问题,是可以将它们混合在一起。通过你的描述来看,我认为这是你需要做什么:
As for your question about using server side script inside client side javascript, yes you can mix them together. Judging by your description, i think this is what you need to do:
<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
这篇关于如何使用多个标记谷歌地图API在同一个地图上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!