谷歌地图标记管理器 V3

Question

谷歌地图标记管理器 V3

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers

9

我尝试过使用谷歌地图标记管理器，但每次似乎都遇到了难题。我按照谷歌文档上的教程创建标记管理器，但貌似对我没有作用。是我的代码编写有问题吗？我已经没有更多想法了。目前，我只设置了一个标记在地图上根据经纬度下降。

请问有人可以尝试实现教程代码并为我找到一个可行的解决方案吗？这让我感到非常疯狂。

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

- mjcoder

1

你已经包含了这个文件，但是为什么上面的代码中没有使用标记管理器类呢？ - Salman A

引发错误：GBounds未定义 [在此错误上中断] GBounds.prototype.containsPoint = function (point) { 在markermanager.js文件中 - mjcoder

你使用的是什么标记管理器？你是否在使用一个专为GMAP API v2设计但也适用于GMAP API v3的标记管理器？ - Salman A

把右对齐放在V3的标记管理器中，谷歌不会让事情变得简单。好的，我要尝试使用V3创建标记并看看效果如何。 - mjcoder

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Salman A · Accepted Answer

这里有一个示例可以帮助您入门：

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上添加了所有标记。理想情况下，您应该在较低的缩放级别上加载少量的标记，并在较高的缩放级别上加载更多的标记。