javascript 谷歌地图标记管理器 V3

Google Map Marker Manager V3

提问by MJCoder

i've tried using google maps marker manager, but i seem to be hitting a brick wall everytime, i follow the tutorials on how to create markermanager on google documentation, but it seems nothing is working for me, is it a problem in how my code is written? running out of ideas here, at the moment i have set ONE marker to drop down on the map based on latlng.

我试过使用谷歌地图标记管理器，但我似乎每次都碰到砖墙，我按照有关如何在谷歌文档上创建标记管理器的教程进行操作，但似乎没有任何效果对我有用，这是我的问题代码写好了吗？这里的想法不多了，目前我已经设置了一个标记以根据 latlng 在地图上下拉。

can someone please try like implementing the tutorial code and find a working solution for me? its driving me mad.

有人可以尝试实现教程代码并为我找到一个可行的解决方案吗？它让我发疯。

@{
    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>

回答by Salman A

Here is an example to get you started:

这是一个让您入门的示例：

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>

Notice that when creating a marker, I did not specify map: mapor marker.setMap(map). Instead, the markers are added to the marker manager which in turn adds them to the map when you call markermanager.refresh().

请注意，在创建标记时，我没有指定map: map或marker.setMap(map)。相反，标记会添加到标记管理器中，然后在您调用 时将它们添加到地图中markermanager.refresh()。

Also note that I've added all markers on the zoom level 0. Ideally you should load few markers on lower zoom levels and more markers on higher zoom levels.

另请注意，我已在缩放级别上添加了所有标记0。理想情况下，您应该在较低的缩放级别加载少量标记，并在较高的缩放级别加载更多标记。

• jsFiddle
• Marker Manager Reference
• Marker Manager Examples

• js小提琴
• 标记管理器参考
• 标记管理器示例