GeoJSON，重叠指针，OverlappingMarkerSpiderfier [英] GeoJSON, Overlapping Pointers, OverlappingMarkerSpiderfier
本文介绍了GeoJSON，重叠指针，OverlappingMarkerSpiderfier的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对Google Maps Api相当陌生。在GeoJson文件中，我有地理位置列表（cordinates lat-lon）。
包含：
map.data.loadGeoJson（ 'JSON / geojson.json'）;
我将数据放在地图上作为Point-s。我有问题，有相同的坐标点。
我发现这个
https：// github .com / jawj / OverlappingMarkerSpiderfier
但是这个标记是有效的，所以我不能使用它。
连连呢？我可以用OverlappingMarkerSpiderfier做到吗？
我的代码：
函数initialize（）{
var map = new google.maps.Map（document.getElementById（'map-canvas'），{
zoom：13，
center：{lat ：45.8167，lng：15.9833}
}）;
map.data.loadGeoJson（'json / geojson.json'）;
//////////////////////////
//用于分组指针/标记的代码
//////////////////////////
map.data.setStyle（function（feature）{
return {
icon：'/ inc / mapper / img /'+ feature.getProperty（'icon_url'）+'.png'，
};
}）;
google.maps.event.addDomListener（window，'load'，initialize）;
解决方案
处理GeoJson，创建自己的标记并添加它们以下示例使用MarkerClustererPlus和OverlappingMarkerSpiderfier，GeoJSON本地数据来自该页面。
a href =http://jsfiddle.net/geocodezip/gL3L7zso/176/ =nofollow noreferrer> working jsfiddle （位于比勒费尔德中心的重复标记位置）
工作代码片段：
var map = null ; var borders = new google.maps.LatLngBounds（）; var boxText = document.createElement（div）; boxText.style.cssText =border：1px solid black; margin-top：8px; background：yellow; padding： 5px;; var infobox = new InfoBox（{content：boxText，disableAutoPan：false，maxWidth：0，pixelO ffset：new google.maps.Size（-140，0），zIndex：null，boxStyle：{background：url（'tipbox.gif'）no-repeat，opacity：0.75，width：280px}，closeBoxMargin ：10px 2px 2px 2px，closeBoxURL：http://www.google.com/intl/en_us/mapfiles/close.gif，infoBoxClearance：new google.maps.Size（1，1），isHidden：false，窗格：floatPane，enableEventPropagation：false}）; var markerClusterer = new MarkerClusterer（null，null，{imagePath：https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/ m）}）; minClusterZoom = 14; markerClusterer.setMaxZoom（minClusterZoom）; function initialize（）{var mapOptions = {center：new google.maps.LatLng（52，8），zoom：4}; map = new google.maps.Map（document.getElementById（'map'），mapOptions）; var oms = new OverlappingMarkerSpiderfier（map，{markersWontMove：true，markersWontHide：true，keepSpiderfied：true}）; markerClusterer.setMap（地图）; google.maps.event.addListener（map.data，'addfeature'，function（e）{if（e.feature.getGeometry（）。getType（）==='Point'）{var marker = new google.maps。 Marker（{position：e.feature.getGeometry（）。get（），title：e.feature.getProperty（'name'），map：map}）; google.maps.event.addListener（marker，'click'，函数（marker，e）{return function（）{var myHTML = e.feature.getProperty（'name'）; boxText.innerHTML =< div style ='text-align：center;'>< b> + myHTML +< / b>< / div>; infobox.setPosition（e.feature.getGeometry（）。get（））; infobox.setOptions（{pixelOffset：new google.maps.Size（0， 0）}）; infobox.open（map）;};}（marker，e））; markerClusterer.addMarker（marker）; oms.addMarker（marker）; bounds.extend（e.feature.getGeometry（）。get ））; map.fitBounds（bounds）; map.setCenter（e.feature.getGeometry（）。get（））;}}）; layer = map.data.addGeoJson（geoJson）; map.data.setMap（NULL）; google.maps.event.addListener（map，click，function（）{infobox.close（）;}）;} google.maps.event.addDomListener（window，'load'，initialize）; var geoJson = {类型：FeatureCollection，features：[{type：Feature，properties：{name：Bielefeld}，geometry：{type：Point，coordinates ：[8.528849，52.030656]}}，{type：Feature，properties：{name：Bielefeld2}，geometry：{type：Point，coordinates [8.528849，52.030656]}}，{type：Feature，properties：{name：Herford}，geometry：{type：Point，coordinates：[8.676780 ，52.118003]}}，{type：Feature，properties：{name：Guetersloh}，geometry：{type：Point，coordinates：[8.383353,51.902917 ]}，{type：Feature，properties：{name：Guetersloh2}，geometry：{type：Point，coordinates：[8 .38，51.9]}}]};
#map {width：500px; height：500px;}
< script src =https ：//maps.googleapis.com/maps/api/js？v = 3>< / script>< script src =https://cdn.rawgit.com/googlemaps/v3-utility-library/ master / infobox / src / infobox.js>< / script>< script src =https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js >< / script>< script src =http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js>< / script>< div id =map> ;< / div>
I'm fairly new to the Google Maps Api. In GeoJson file I have list of geo locations (cordinates lat-lon).
with:
map.data.loadGeoJson('json/geojson.json');
I'm putting data on map as Point-s. I have problem with Points that have same cordinates.
I found this https://github.com/jawj/OverlappingMarkerSpiderfier
but this works with markers so i cant get it to work.
Suggestions? Can I do it with OverlappingMarkerSpiderfier?
My code:
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: {lat: 45.8167, lng: 15.9833}
});
map.data.loadGeoJson('json/geojson.json');
//////////////////////////
//CODE FOR GROUPING POINTERS/MARKERS
//////////////////////////
map.data.setStyle(function (feature) {
return {
icon: '/inc/mapper/img/' + feature.getProperty('icon_url') + '.png',
};
});
}
google.maps.event.addDomListener(window, 'load', initialize);
解决方案
Process the GeoJson, create your own markers, add them to the OverlappingMarkerSpiderfier.
Examples below use MarkerClustererPlus and OverlappingMarkerSpiderfier, data from GeoJSON local to the page.
working jsfiddle (duplicate marker position at Bielefeld in the center)
Working code snippet:
var map = null;
var bounds = new google.maps.LatLngBounds();
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
});
var markerClusterer = new MarkerClusterer(null, null, {
imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"
});
minClusterZoom = 14;
markerClusterer.setMaxZoom(minClusterZoom);
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52, 8),
zoom: 4
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var oms = new OverlappingMarkerSpiderfier(map, {
markersWontMove: true,
markersWontHide: true,
keepSpiderfied: true
});
markerClusterer.setMap(map);
google.maps.event.addListener(map.data, 'addfeature', function(e) {
if (e.feature.getGeometry().getType() === 'Point') {
var marker = new google.maps.Marker({
position: e.feature.getGeometry().get(),
title: e.feature.getProperty('name'),
map: map
});
google.maps.event.addListener(marker, 'click', function(marker, e) {
return function() {
var myHTML = e.feature.getProperty('name');
boxText.innerHTML = "<div style='text-align: center;'><b>" + myHTML + "</b></div>";
infobox.setPosition(e.feature.getGeometry().get());
infobox.setOptions({
pixelOffset: new google.maps.Size(0, 0)
});
infobox.open(map);
};
}(marker, e));
markerClusterer.addMarker(marker);
oms.addMarker(marker);
bounds.extend(e.feature.getGeometry().get());
map.fitBounds(bounds);
map.setCenter(e.feature.getGeometry().get());
}
});
layer = map.data.addGeoJson(geoJson);
map.data.setMap(null);
google.maps.event.addListener(map, "click", function() {
infobox.close();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Bielefeld"
},
"geometry": {
"type": "Point",
"coordinates": [8.528849, 52.030656]
}
}, {
"type": "Feature",
"properties": {
"name": "Bielefeld2"
},
"geometry": {
"type": "Point",
"coordinates": [8.528849, 52.030656]
}
}, {
"type": "Feature",
"properties": {
"name": "Herford"
},
"geometry": {
"type": "Point",
"coordinates": [8.676780, 52.118003]
}
}, {
"type": "Feature",
"properties": {
"name": "Guetersloh"
},
"geometry": {
"type": "Point",
"coordinates": [8.383353, 51.902917]
}
}, {
"type": "Feature",
"properties": {
"name": "Guetersloh2"
},
"geometry": {
"type": "Point",
"coordinates": [8.38, 51.9]
}
}]
};
#map {
width: 500px;
height: 500px;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<div id="map"></div>
这篇关于GeoJSON，重叠指针，OverlappingMarkerSpiderfier的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
