Node.js googlemaps 클러스터 실행 오류

Question

이제 node.js 플랫폼을 사용하고 있습니다. 그리고 googlemap 클러스터 라이브러리를 사용하고 싶습니다. 그러나 나는 소스 코드를 실행할 수 없다.

Google지도 클러스터 API URL은 : https://github.com/googlemaps/js-marker-clusterer

해당 도서관의 인덱스는 다음과 같습니다.

• DOSC
• 예
• 이미지
• SRC
• 등의 예 디렉토리에서

, 나는 "simple_example.html"을 테스트하려는.

내 node.js 소스 코드는 다음과 같습니다.

는 [app.js]

var express = require("express"); 
var app = express(); 
app.set('view engine','ejs'); 
var path = require("path"); 
app.set("public", path.join(__dirname, "public")); 

app.get('/', function(req, res){ 
    res.render("simple_example", {}) 
}); 

app.listen(3000); 
console.log("Running at Port 3000"); 

[simple_example.ejs]

(스크립트 중요한 부분)

<script src="https://maps.googleapis.com/maps/api/js"></script> 
<script src="public/data.json"></script> 
<script type="text/javascript" src="public/src/markerclusterer.js"></script> 

<script> 
    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, {imagePath: 'public/images/m'}); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

이 픽처 내 소스 코드 실행의 결과이다. 그림은지도에 표시되어 있지 않습니다. 나는 그림이 아래에 있다고 기대했다.

나는 (파이썬 등) SRC의 경로 변경, 변경 웹 플랫폼을 시도하지만 난 문제를 해결할 수 없습니다. 누가 해결책을 알고 있습니까?

Answer 1

마커 클러스터를 만든 후에는 addMarker() 메서드를 사용하거나 생성자에 마커 배열을 제공하여 지원하십시오. 그들이이 일을 비슷 마커의 배열을 제공하여 생성자에 마커를 추가 말할 때

:

var markers = []; //create a global array where you store your markers 
for (var i = 0; i < 100; i++) { 
var latLng = new google.maps.LatLng(data.photos[i].latitude, 
data.photos[i].longitude); 
var marker = new google.maps.Marker({'position': latLng}); 
markers.push(marker); //push individual marker onto global array 
} 
var markerCluster = new MarkerClusterer(map, markers); //create clusterer and push the global array of markers into it. 

당신은 기본적으로 다음과 같은 클러스터에 추가 addMarker()를 사용하여 추가하려면 다음

여기

var markerCluster //cluster object created on global scope 

//do your marker creation and add it like this: 
markerCluster.addMarker(newMarker, true); //if specify true it'll redraw the map 

가 MarkerCluster에 대한 참조입니다 : 또한 https://googlemaps.github.io/js-marker-clusterer/docs/examples.html

, 여기 markercluster를 사용하는 방법을 데모 응용 프로그램입니다 : https://github.com/googlemaps/js-marker-clusterer