[英]Node.js googlemaps cluster execute error
I'm now use the node.js platform. 我现在使用node.js平台。 And I want to use googlemap cluster library. 而且我想使用googlemap集群库。 However I can't execute the source code. 但是我无法执行源代码。
googlemaps cluster api url : https://github.com/googlemaps/js-marker-clusterer googlemaps群集api网址: https : //github.com/googlemaps/js-marker-clusterer
This library's index is below. 该库的索引如下。
In the directory of examples, I want to test a "simple_example.html". 在示例目录中,我想测试一个“ simple_example.html”。
My node.js source code is below. 我的node.js源代码如下。
[app.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] (important script part) [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>
This picture is result of execute by my source code. 这张图片是我的源代码执行的结果。 but the picture doesn't have markered in the map. 但图片在地图上没有标记。 I expected picture is below. 我期望下面的图片。
I tried path change of src, change web platform(as python) but I can't solve the problem. 我尝试更改src的路径,更改Web平台(如python),但无法解决问题。 Who know the solution? 谁知道解决方案?
Once you create a marker cluster, support it by using addMarker()
method or by providing a array of markers to the constructor. 创建标记集群后,可通过使用addMarker()
方法或向构造函数提供标记数组来支持它。
When they say add marker to constructor by providing a array of markers it's similar to doing this: 当他们说通过提供标记数组将标记添加到构造函数时,它类似于执行以下操作:
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.
To add it using addMarker() you basically add it to the cluster like the following: 要使用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
Here's a reference to MarkerCluster: https://googlemaps.github.io/js-marker-clusterer/docs/examples.html 这是对MarkerCluster的引用: https ://googlemaps.github.io/js-marker-clusterer/docs/examples.html
Also, here's a demo app how to use markercluster: https://github.com/googlemaps/js-marker-clusterer 另外,这是一个演示应用程序如何使用markercluster: https : //github.com/googlemaps/js-marker-clusterer
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.