Googlemap API v3 - 我可以从Marker获取内容吗？ [英] Googlemap API v3 - Can I get Content from Marker?
本文介绍了Googlemap API v3 - 我可以从Marker获取内容吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了很多标记，但我认为在获取用于平均的内容并设置infowindow内部点击是markerCluster上所有标记的平均值。
每个标记必须给他一个价值。快照
我想抓取所有标记和平均值，并在infowindow中显示。快照：
这里是我的代码：
var locations = [
['100'，22.75853,121.14886，1]，
['90'，22.7586 ，121.14891,2]，
['80'，22.75857,121.1488,3]，
['70'，22.75844,121.14887,4]，
['60'，25.08389,121.57796 ，5]，
['50'，22.75839,121.14891,6]，
['40'，22.75831,121.14912,7]，
['30'，22.75838,121.14904,8 ]，
['20'，22.75856,121.14867,9]，
['10'，25.08229,121.57822,10]];
var mapOptions = {
center：new google.maps.LatLng（25.048215，121.517123），
zoom：7
};
var map = new google.maps.Map（document.getElementById（'map- canvas'），mapOptions）;
var infowindow = new google.maps.InfoWindow;
var markers = [];
for（var i = 0; i< locations.length; i ++）{
var latLng = new google.maps.LatLng（locations [i] [1]，locations [i] [2] ）;
var marker = new google.maps.Marker（{position：latLng}）;
markers.push（marker）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
infowindow.setContent（locations [i ] [b]）;
infowindow.open（map，marker）;
}
}）（marker，i））;
}
var clusterOptions = {zoomOnClick：false};
var markerCluster = new MarkerClusterer（map，markers，clusterOptions）;
google.maps.event.addListener（markerCluster，'clusterclick'，function（cluster）{
var content ='';
var info = new google.maps.MVCObject ;
info.set（'position'，cluster.center_）;
var allmarke = cluster.getMarkers（）;
var titles =;
for（var i = 0; i
}
infowindow.close（）;
infowindow.setContent（titles）;
infowindow.open（map，info）;
}）;
解决方案
- 添加自定义属性到包含其价值的标记：
for （var i = 0; i< locations.length; i ++）{
var latLng = new google.maps.LatLng（locations [i] [1]，locations [i] [2]）;
var marker = new google.maps.Marker（{
position：latLng，
_myValue：locations [i] [0] //< - custom property
}） ;
markers.push（marker）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
infowindow.setContent（locations [i ] [b]）;
infowindow.open（map，marker）;
}
}）（marker，i））;
}
- 创建这些值显示在infowindow中：
var total = 0;
for（var i = 0; i< allmarke.length; i ++）{
total + = parseFloat（allmarke [i] ._ myValue）;
}
titles =avg+（total /（allmarke.length））。toFixed（2）;
infowindow.close（）;
infowindow.setContent（titles）;
infowindow.open（地图，信息）;
代码段：
<
var locations = [['100'，22.75853，121.14886，1]，['90'，22.7586，121.14891，2]， ['80'，22.75857,121.1488,3]，['70'，22.75844,121.14887,4]，['60'，25.08389,121.57796,5]，['50'，22.75839,121.14891,6]，[ 40'，22.75831,121.14912,7]，['30'，22.75838,121.14904,8]，['20'，22.75856,121.14867,9]，['10'，25.08229,121.57822,10]]; var mapOptions = {center：new google.maps.LatLng（25.048215，121.517123），zoom：7}; var map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; var infowindow = new google。 maps.InfoWindow; var markers = []; （var i = 0; i< locations.length; i ++）{var latLng = new google.maps.LatLng（locations [i] [1]，locations [i] [2]）; var marker = new google.maps.Marker（{position：latLng，_myValue：locations [i] [0]}）; markers.push（标记）; google.maps.event.addListener（marker，'click'，（function（marker，i）{return function（）{infowindow.setContent（locations [i] [0]）; infowindow.open（map，marker）;} }）（marker，i））;} var clusterOptions = {zoomOnClick：false，imagePath：https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m\"};var markerCluster = new MarkerClusterer（map，markers，clusterOptions）; google.maps.event.addListener（markerCluster，'clusterclick'，function（cluster）{var content =''; var info = new google.maps.MVCObject; info.set （'position'，cluster.center_）; var allmarke = cluster.getMarkers（）; var titles =; var total = 0; for（var i = 0; i< allmarke.length; i ++）{total + = parseFloat（allmarke [i] ._ myValue）;} titles =avg+（total /（allmarke.length））。toFixed（2）; infowindow.close（）; infowindow.setContent（titles）; infowindow.open（map ，info）;}）;
html，body，＃map-canvas {height：100％;宽度：100％; margin：0px; < script src =https：//
>
I created a lot of a Marker but I think after obtaining their content used to do average and set infowindow click inside is the average of all Marker on markerCluster.
Each Marker has to give him a value. snapshot
I want to grab all marker and average , and displayed in infowindow. Snapshot:
here is my Code:
var locations = [
['100', 22.75853,121.14886, 1],
['90', 22.7586,121.14891, 2],
['80', 22.75857,121.1488, 3],
['70', 22.75844,121.14887, 4],
['60', 25.08389,121.57796, 5],
['50', 22.75839,121.14891, 6],
['40', 22.75831,121.14912, 7],
['30', 22.75838,121.14904, 8],
['20', 22.75856,121.14867, 9],
['10', 25.08229,121.57822, 10]];
var mapOptions = {
center: new google.maps.LatLng(25.048215, 121.517123),
zoom: 7
};
var map = new google.maps.Map(document.getElementById('map- canvas'),mapOptions);
var infowindow = new google.maps.InfoWindow;
var markers=[];
for (var i = 0; i < locations.length; i++) {
var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
var marker = new google.maps.Marker({ position: latLng });
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
var clusterOptions = { zoomOnClick: false };
var markerCluster = new MarkerClusterer(map, markers,clusterOptions);
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var content = '';
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
var allmarke = cluster.getMarkers();
var titles = "";
for(var i = 0; i < allmarke.length; i++) {
titles = "put avage in here";
}
infowindow.close();
infowindow.setContent(titles);
infowindow.open(map, info);
});
解决方案
- add a custom property to the marker containing its "value":
for (var i = 0; i < locations.length; i++) {
var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
var marker = new google.maps.Marker({
position: latLng,
_myValue: locations[i][0] // <-- custom property
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
- create the average of those values for display in the infowindow:
var total = 0;
for (var i = 0; i < allmarke.length; i++) {
total += parseFloat(allmarke[i]._myValue);
}
titles = "avg " + (total / (allmarke.length)).toFixed(2);
infowindow.close();
infowindow.setContent(titles);
infowindow.open(map, info);
code snippet:
var locations = [
['100', 22.75853, 121.14886, 1],
['90', 22.7586, 121.14891, 2],
['80', 22.75857, 121.1488, 3],
['70', 22.75844, 121.14887, 4],
['60', 25.08389, 121.57796, 5],
['50', 22.75839, 121.14891, 6],
['40', 22.75831, 121.14912, 7],
['30', 22.75838, 121.14904, 8],
['20', 22.75856, 121.14867, 9],
['10', 25.08229, 121.57822, 10]
];
var mapOptions = {
center: new google.maps.LatLng(25.048215, 121.517123),
zoom: 7
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow;
var markers = [];
for (var i = 0; i < locations.length; i++) {
var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
var marker = new google.maps.Marker({
position: latLng,
_myValue: locations[i][0]
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
var clusterOptions = {
zoomOnClick: false,
imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"
};
var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var content = '';
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
var allmarke = cluster.getMarkers();
var titles = "";
var total = 0;
for (var i = 0; i < allmarke.length; i++) {
total += parseFloat(allmarke[i]._myValue);
}
titles = "avg " + (total / (allmarke.length)).toFixed(2);
infowindow.close();
infowindow.setContent(titles);
infowindow.open(map, info);
});
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map-canvas"></div>
这篇关于Googlemap API v3 - 我可以从Marker获取内容吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
