Node.js googlemaps集群执行错误

Question

我现在使用node.js平台。 而且我想使用googlemap集群库。 但是我无法执行源代码。

googlemaps群集api网址： https : //github.com/googlemaps/js-marker-clusterer

该库的索引如下。

• 档案
• 例子
• 图片
• 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的路径，更改Web平台（如python），但无法解决问题。 谁知道解决方案？

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