#javascript #google-maps #google-maps-api-3 #google-maps-markers
#javascript #google-карты #google-maps-api-3 #google-карты-маркеры
Вопрос:
я пытался использовать Google maps marker Manager, но, кажется, я каждый раз натыкаюсь на кирпичную стену, я следую инструкциям по созданию markermanager в документации Google, но, похоже, у меня ничего не работает, проблема в том, как написан мой код? на данный момент у меня закончились идеи, и я установил ОДИН маркер для выпадения на карте на основе latlng.
может кто-нибудь, пожалуйста, попробовать реализовать обучающий код и найти для меня рабочее решение? это сводит меня с ума.
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div id="map_canvas" style="width:500px; height:500px;"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
@*<script src="../../Scripts/markermanager.js" type="text/javascript"></script>*@
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP // map view, can be set to satellite, street, roadview, aerialview
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
animation: google.maps.Animation.DROP,
title: "Uluru (Ayers Rock)"
});
marker.setMap(map);
}
$(document).ready(function () {
initialize();
});
</script>
Комментарии:
1. Вы включили файл, но не используете класс marker manager в приведенном выше коде. Почему это так?
2. выдает ошибки: GBounds не определен [перерыв на этой ошибке] GBounds.prototype.containsPoint = функция (точка) { внутри markermanager.js файл
3. Какой менеджер маркеров вы используете? Используете ли вы диспетчер маркеров, созданный для GMAP API v2 с GMAP API v3?
4. правильно, просто вставьте менеджер маркеров для v3, Google не делает вещи простыми, правильно, я собираюсь попробовать и создать маркеры сейчас, используя v3, и посмотреть, как у меня получится.
Ответ №1:
Вот пример, который поможет вам начать:
var map;
var mgr;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, "loaded", function() {
for (var i = 0; i < 1000; i ) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(Math.random() * 180 - 90, Math.random() * 360 - 180),
title: "Random marker #" i
});
mgr.addMarker(marker, 0);
}
mgr.refresh();
});
}
google.maps.event.addDomListener(window, "load", initialize);
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>
<div id="map_canvas" style="height: 400px;"></div>
<p>Pan or zoom out to see markers</p>
Обратите внимание, что при создании маркера я не указал map: map
или marker.setMap(map)
. Вместо этого маркеры добавляются в диспетчер маркеров, который, в свою очередь, добавляет их на карту при вызове markermanager.refresh()
.
Также обратите внимание, что я добавил все маркеры на уровне масштабирования 0
. В идеале вы должны загружать несколько маркеров на более низких уровнях масштабирования и больше маркеров на более высоких уровнях масштабирования.
Комментарии:
1. отличный пример.. именно то, что мне было нужно, поэтому я вижу, что мы использовали цикл for, который создаст до 1000 маркеров и разместит их случайным образом, используя math.random(), как бы я мог сделать так, чтобы при загрузке карты все маркеры отображались без увеличения или уменьшения масштаба, чтобы увидеть их все? будет ли это похоже на: map.fitBounds(latlngbounds);
2. в приведенном выше примере, как мне разместить все маркеры на карте без увеличения / уменьшения масштаба? map.fitBounds(); это так?
3. сейчас у меня работает, теперь я буду смотреть на результат JSON в MVC3 🙂 спасибо, Салман 🙂
4. Теперь, когда вы упомянули JSON и Marker Manager, взгляните на эту страницу (использует api v2). Уменьшите масштаб карты в 5-6 раз и переместите карту; вы заметите AJAX-запросы. Не стесняйтесь просматривать исходный код.
5. Я считаю, что вы можете легко сделать это с помощью InfoWindows . Ознакомьтесь с примерами на этой странице.