Google Map Marker Manager V3 - PullRequest
Новая
       17

Google Map Marker Manager V3

6 голосов
/ 19 октября 2011

Я пытался использовать менеджер маркеров Google Maps, но мне кажется, что я каждый раз сталкиваюсь с кирпичной стеной. Я следую инструкциям по созданию Markermanager в документации Google, но, похоже, у меня ничего не работает, неужели это проблема?как написан мой код?у меня заканчиваются идеи, на данный момент я установил ОДИН маркер для выпадающего списка на карте в зависимости от широты.

Может кто-нибудь попробовать попробовать код учебника и найти для меня работающее решение?это сводит меня с ума.

@{
    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 Ответ

16 голосов
/ 19 октября 2011

Вот пример, с которого можно начать: 

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. В идеале вы должны загружать несколько маркеров на более низких уровнях масштабирования и больше маркеров на более высоких уровнях масштабирования.

...