2013-06-16 4 views
2

Я пытаюсь реализовать markerclusterer на своем веб-сайте последние несколько недель, и все, что я пробовал, не удалось. У меня нет опыта работы с кодом, поэтому все, что я делаю, - это проб и ошибок.Внедрение MarkerClusterer в API Карт Google - никаких маркеров, показывающих

Веб-сайт, на котором я пытаюсь добавить markerclusterer, - это rfmaps.com.au.

Я не уверен, что я делаю неправильно, и что нужно исправить, и на самом деле просто нужны хорошие советы и помощь.

Вот код html, который я пытался найти. Этот код просто все биты и куски я смог найти на форумах, все застряли вместе, и слегка отредактированные (то, что я мог понять, от помощи из форумов)

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style> 
 
     html, body, #map-canvas { 
 
     margin: 0; 
 
     padding: 0; 
 
     height: 100%; 
 
     } 
 
    </style> 
 
    <script type="text/javascript" 
 
      src="http://maps.google.com/maps/api/js?sensor=false"> 
 
    </script> 
 
    <script type="text/javascript"> 
 
     var map; 
 
     var layerl0; 
 
     function initialize() { 
 
     map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
      center: new google.maps.LatLng(-25, 133), 
 
      zoom: 5, 
 
      mapTypeId: google.maps.MapTypeId.HYBRID 
 
     }); 
 

 
     for (var i = 0; i < 1000; ++i) { 
 
      var latLng = new google.maps.LatLng(data.photos[i].latitude, 
 
               data.photos[i].longitude) 
 
      var marker = new google.maps.Marker({ 
 
      position: latLng, 
 
      draggable: true, 
 
      icon: markerImage 
 
      }); 
 
      markers.push(marker); 
 
     } 
 

 
     var map = new google.maps.Map(document.getElementById("map"), options); 
 
     var mc = new MarkerClusterer(map); 
 

 
     layerl0 = new google.maps.FusionTablesLayer({ 
 
      query: { 
 
      select: "'col2'", 
 
      from: '1UxncvVQSGcSvuN3t686sNuDQUsn8vQ6mws3zsvk' 
 
      }, 
 
      map: map, 
 
      styleId: 4, 
 
      templateId: 1 
 
     }); 
 
     } 
 
     function changeMapl0() { 
 
     var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'"); 
 
     layerl0.setOptions({ 
 
      query: { 
 
      select: "'col2'", 
 
      from: '1UxncvVQSGcSvuN3t686sNuDQUsn8vQ6mws3zsvk', 
 
      where: "'Location' CONTAINS IGNORING CASE '" + searchString + "'" 
 
      } 
 
     }); 
 
     } 
 
     google.maps.event.addDomListener(window, 'load', initialize); 
 
    </script> 
 
    </head> 
 
    <body> 
 
    <div id="map-canvas"></div> 
 
    <div style="margin-top: 10px;"> 
 
     <label>Location</label><input type="text" id="search-string-l0"> 
 
     <input type="button" onClick="changeMapl0()" value="Search"> 
 
    </div> 
 
    </body> 
 
</html>

+0

что такое данные? Вам также потребуется включить библиотеку markerclusterer (она не входит в google.maps) –

+0

[пример кластеризации (данные из xml)] (http://www.geocodezip.com/v3_MW_example_map3_clustered.html) - однако, это похоже, что вы ожидаете данные от вашего FusionTable к кластеру, вы можете это сделать, но вам придется запросить таблицу для данных, а затем загрузить в MarkerClusterer. Вы можете сделать это с помощью API-интерфейсов Fusion Tables v1.0, но доступ через этот API в настоящее время отключен. – geocodezip

+0

@geocodezip: что вы подразумеваете под «отключенным в настоящее время», я могу получить доступ к FusionTables через API? –

ответ

2

Я думаю, вы не добавили объект «map» при создании маркеров внутри карты.

Это ваш код:

var marker = new google.maps.Marker({ 
      position: latLng, 
      draggable: true, 
      icon: markerImage 
      }); 

Пожалуйста, добавьте карты: карта, генерируя свои маркеры, например:

var marker = new google.maps.Marker({ 
      map: map, 
      position: latLng, 
      draggable: true, 
      icon: markerImage 
      }); 

Что касается маркера кластера необходимо добавить этот JS Файл- markerclusterer.js

markerCluster = new MarkerClusterer(map, marker);