0

数日前から Google マップでマーカーをクラスター化しようとしてきましたが、コードの実装方法がわかりません。

私はこの地図を持っています - > https://maps.google.com/maps/ms?msid=211137438455901265530.0004cbb2cd7859b1b6c75&msa=0&ll=7.710992,-2.8125&spn=137.343849,307.96875

このウェブサイトに埋め込まれています -> projectevomap.yolasite.com/

このマップのようなクラスターを追加したい - > http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html

これはそのページのソースコードです ->

ビューソース:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html

基本的に、既存のコードをどのように取得して変更し、クラスターを含むマップをサイトに表示するかについて、いくつかのガイダンスを実行できます。ソースコードの小さなセクションを、例のマップではなく私のマップに向けるアドレスに変更するだけだと思っていたでしょうが (?)、間違っているかもしれません。

4

2 に答える 2

1

つまり、現時点で行っていることは、Web ページに Google マップを埋め込むことだけです。代わりに、Google Maps API を使用して、Google マップをページに直接追加する必要があります。つまり、カスタマイズしたマップを使用しません。次に、必要なすべてのマーカーを追加し、markerclusterer JS ファイルを含め、markerClusterer を初期化する必要があります。

実際そうです！

 <script type="text/javascript">
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);

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

        var markers = [];
        for (var i = 0; i < 100; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
于 2012-10-19T08:45:47.020 に答える