Как использовать API карт Google с несколькими маркерами на одной карте
-
03-07-2019 - |
Вопрос
Итак, у меня есть следующий скрипт для использования API карт Google, все в порядке, но мне нужно создать карту, имеющую более одного маркера (значок в форме воздушного шара, указывающий на что-то), и мне нужно, чтобы каждый из этих маркеров указывал на другая область карты (т.е.разные координаты), как мне это сделать?
<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>
и мой <%=ScriptText%> будет строкой, которую я создам и присвою ее значение Friend или Public переменной, называемой ScriptText, будет ли она по-прежнему работать и работать правильно?(я делаю это, чтобы сделать мой скрипт динамичным и различным в зависимости от того, как я его создаю как СТРОКУ, из-за моей неграмотности в JavaScript; 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
для каждого места, которое вы хотите отметить на карте.Имеется довольно хорошая документация здесь для GMarker
с.
Чтобы создать GMarker
, из документации вы увидите, что сначала вам нужно создать GLatLng
представляющее место, куда вы хотите поместить маркер.Вы не упомянули о желании разместить какой-либо контент в выноске, поэтому я предполагаю, что вам нужен просто маркер.В вашем случае код, вероятно, будет выглядеть примерно так:
var markerCoords = [
new GLatLng(<latitude>, <longitude>),
new GLatLng(<latitude>, <longitude>),
[...]
];
for (coord in markerCoords){
map.addOverlay(new GMarker(coord));
};
Я уверен, что вы, вероятно, сможете точно сказать, что здесь происходит, но на всякий случай я создаю массив GLatLng
объекты (это может быть любая длина [в пределах границ, ха-ха]), а затем перебирать их, добавляя маркеры на карту для каждого GLatLng
определенный в массиве.
Если вы планируете создавать много маркеров, вам, вероятно, будет полезно использовать Менеджер маркеров, что ускорит отрисовку большого количества маркеров одновременно (за счет отказа от отрисовки внеэкранных маркеров и сжатия экранных, если их много в одной области экрана).
Обитти довольно хорошо ответил на ваш вопрос.Но из вашего примера кода видно, что вы также хотите, чтобы карта масштабировалась до области, содержащей маркеры.Чтобы сделать это с несколькими маркерами, вы можете создать GLatLngBounds который вы расширяете для каждого маркера.Затем вы можете получить центр и масштаб, которые подойдут для вашей коллекции маркеров, из объекта границ.
var markersBounds = GLatLngBounds();
var coord = null;
for (coord in markerCoords){
coord = new GMarker(coord);
map.addOverlay();
markersBounds.extend(coord);
};
var markersCenter = markersBounds.getCenter();
var markersZoom = G_HYBRID_MAP.getBoundsZoomLevel(markersBounds);
map.setCenter(markersCenter, markersZoom);
Я не уверен на 100% насчет G_HYBRID_MAP.getBoundsZoomLevel, но если я правильно помню, G_HYBRID_MAP — это экземпляр ГМапТип.
У меня есть что-то подобное, но события не работают.Могу ли я добавить слушателей внутри конструктора объекта?
//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);
}