谷歌地图上的自定义标记

时间:2012-06-11 06:34:55

标签: javascript google-maps

我预定了大约6k标记的谷歌地图。我如何为他们制作自定义标记,如果我需要放置marker_1如果1cm ^ 2中有10个以上的点,或者如果有50个以上则放置marker_2等。最后一个,我需要在这个自定义标记中打印点数。

1 个答案:

答案 0 :(得分:2)

粘贴演示它的代码

 <script type="text/javascript">
  function initialize() {
      var locations = 
       [
            ['Sugar Grove', 41.7696, -88.4588],
           ['Coogee Beach', -33.923036, 151.259052],
            ['Cronulla Beach', -34.028249, 151.157507],
            ['Manly Beach', -33.80010128657071, 151.28747820854187],
             ['Tel Aviv', 32.067, 34.767]
      ];



      var map = new google.maps.Map(document.getElementById('map'), {
                                 zoom: 3,
                                center: new google.maps.LatLng(--putHereCenterVar-->),
                                 mapTypeId: google.maps.MapTypeId.ROADMAP
                            });



            var opt = { minZoom: 2, maxZoom:18  };
            map.setOptions(opt);
            var markers = [];
            var len=LocationLength.Length;
            var i;
            for (i = 0; i < len; i++) {
                var dataValue = locations[i];
                var latLng = new google.maps.LatLng(dataValue[1],dataValue[2]);
                var marker = new google.maps.Marker({position: latLng});
                markers.push(marker);
            }



            var markerCluster = new MarkerClusterer(map, markers);
        }


        google.maps.event.addDomListener(window, 'load', initialize); 

此代码演示了如何向Google地图添加clustreded功能,尝试将其添加到您的代码中。 位置是带有标记locatoin的2d数组,MarkerClusterer是使得很多点看起来像一个具有实例数的大标记的对象。

不要忘记宣布:

 <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js" type="text/javascript"></script>


    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>

希望有所帮助。