2014-01-28 2 views
2

Я использую google heat map, и я пытаюсь загрузить более 1000 указателей на карте, но я не уверен, что он работает.Google Heatmap - нет указателя на карте

Это мой код:

 var map, pointarray, heatmap; 

     var gradient = [ 
      'rgba(0, 255, 255, 0)', 
      'rgba(0, 255, 255, 1)', 
      'rgba(0, 191, 255, 1)', 
      'rgba(0, 127, 255, 1)', 
      'rgba(0, 63, 255, 1)', 
      'rgba(0, 0, 255, 1)', 
      'rgba(0, 0, 223, 1)', 
      'rgba(0, 0, 191, 1)', 
      'rgba(0, 0, 159, 1)', 
      'rgba(0, 0, 127, 1)', 
      'rgba(63, 0, 91, 1)', 
      'rgba(127, 0, 63, 1)', 
      'rgba(191, 0, 31, 1)', 
      'rgba(255, 0, 0, 1)' 
     ] 

var taxiData = [ 
new google.maps.LatLng(43.3128954, 10.5320177), 
new google.maps.LatLng(43.4121300, 10.4157520), 
.... 
new google.maps.LatLng(43.3116784, 10.5298907), 
new google.maps.LatLng(43.3416850, 10.5290120) 
] 

     function initialize() { 
      var mapOptions = { 
       zoom: 13, 
       dissipating: false, 
       center: new google.maps.LatLng(43.3128954, 10.5320177), 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

      pointArray = new google.maps.MVCArray(taxiData); 

      heatmap = new google.maps.visualization.HeatmapLayer({ 
       data: pointArray 
      }); 

      heatmap.setMap(map); 
      heatmap.set('gradient', heatmap.get('gradient') ? null : gradient); 
     } 

     function toggleHeatmap() { 
      heatmap.setMap(heatmap.getMap() ? null : map); 
     } 

     function changeGradient() { 
      var gradient = [ 
       'rgba(0, 255, 255, 0)', 
       'rgba(0, 255, 255, 1)', 
       'rgba(0, 191, 255, 1)', 
       'rgba(0, 127, 255, 1)', 
       'rgba(0, 63, 255, 1)', 
       'rgba(0, 0, 255, 1)', 
       'rgba(0, 0, 223, 1)', 
       'rgba(0, 0, 191, 1)', 
       'rgba(0, 0, 159, 1)', 
       'rgba(0, 0, 127, 1)', 
       'rgba(63, 0, 91, 1)', 
       'rgba(127, 0, 63, 1)', 
       'rgba(191, 0, 31, 1)', 
       'rgba(255, 0, 0, 1)' 
      ] 
      heatmap.set('gradient', heatmap.get('gradient') ? null : gradient); 
     } 

     function changeRadius() { 
      heatmap.set('radius', heatmap.get('radius') ? null : 20); 
     } 

     function changeOpacity() { 
      heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2); 
     } 

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

Я создал демо с полным кодом по этой ссылке: http://jsfiddle.net/8b85R/

fixed fiddle (щелчки кнопка работает)

я не понял почему у меня много синих областей, но всего 2 указателя! я ожидал чего-то более похожего на Демо Google (https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap), где вы можете найти все 500 указателей.

Мне нужна ваша помощь! Спасибо!

+0

Что вы подразумеваете под «указателем»? Тепловая карта не будет показывать отдельные точки. У вашего jsfiddle есть ошибки при нажатии на кнопки. [fixed fiddle] (http://jsfiddle.net/8b85R/1/embedded/result/) (который масштабирует, чтобы показать все точки) – geocodezip

+0

Для «указателя» я имею в виду точное местоположение координат google.maps.LatLng на map – MassiCiaoCiao

ответ

1

Что-то еще вот так: http://jsfiddle.net/6JSe7/1/?

Все, что я сделал набрать вниз (или вверх номер мудрого) непрозрачность, точки были там на повышение уровней масштабирования, но они были едва заметны (я имею в виду довольно хорошо незаметным), и добавили рассеивая вариант:

heatmap = new google.maps.visualization.HeatmapLayer({ 
      data: pointArray, 
      dissipating: true, 
      radius: 35 

     }); 

     heatmap.setMap(map); 
     heatmap.set('gradient', heatmap.get('gradient') ? null : gradient); 
     heatmap.set('opacity', '0.9'); 
+0

теперь он выглядит лучше, но это не то, что я хочу. Я пытаюсь объяснить лучше. Если вы посмотрите демо в Google (вы можете найти ссылку на эту тему), если вы увеличиваете масштаб карты, вы можете точно видеть, где находятся координаты google.maps.LatLng, но этого не происходит на моей демонстрации. Любые идеи? – MassiCiaoCiao

Смежные вопросы