使用 loadGeoJson 加载点数据时如何访问 lng/lat?
How can I get access to lng/lat when I load point data with loadGeoJson?
我正在使用 Google Map loadGeoJson 加载 n 数量的位置数据,除了数据本身不是很好之外,一切正常。通常 gps 坐标会在相同位置放置一个标记,这会破坏 Markerclusterer。作为一项实验,我决定为每个标记添加一点抖动,这不会对位置产生太大影响,但允许 markerclusterer 执行此操作。
问题是我无法访问 gps 数据,也不知道如何访问,我检查了谷歌 API 文档,但没有成功。
如何访问 gps 数据并在将其设置为标记之前对其进行更改?
部分代码
map.data.loadGeoJson('mapdata.json, null, function (features) {
var bounds = new google.maps.LatLngBounds();
markers = features.map(function (feature) {
var markerJitter = feature.getGeometry().get(0); //tried to access data here
var test = markerJitter.lat; this fails too as [[scope]] is in place
var infoWin = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: feature.getGeometry().get(0), //jitter should be present here
title: feature.getProperty("address")
});
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', function (evt) {
closeOtherInfo();
infoWin.setContent('<div id="content">some content</div>');
infoWin.open(map, marker);
infoWindowObj[0] = infoWin;
})
return marker;
});
.... //code continues and works
您正在访问包含坐标的 google.maps.LatLng
对象(即 markerJitter
)。
它没有 .lat 属性,它有 .lat()
函数。
我不确定你的评论 this fails too as [[scope]] is in place
是什么意思。
这是一个函数。您的代码将 test 设置为等于一个函数,这可能不是您想要做的。
代码片段:
function initialize() {
// Create a simple map.
features = [];
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 10,
center: {
lat: 45.495403,
lng: -73.563032
}
});
google.maps.event.addListener(map, 'click', function() {
infowidow.close();
});
// process the loaded GeoJSON data.
// google.maps.event.addListener(map.data, 'addfeature', // );
var features = map.data.addGeoJson(data);
map.data.setMap(null);
var bounds = new google.maps.LatLngBounds();
markers = features.map(function(feature) {
var markerJitter = feature.getGeometry().get(0); //tried to access data here
console.log(markerJitter.toUrlValue(6));
var test = markerJitter.lat; // this fails too as [[scope]] is in place
console.log("markerJitter lat=" + markerJitter.lat() + " lng=" + markerJitter.lng());
var infoWin = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: feature.getGeometry().get(0), //jitter should be present here
title: feature.getProperty("address"),
map: map
});
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent('<div id="content">some content<br>' + this.getTitle() + '</div>');
infoWin.open(map, marker);
infoWindowObj[0] = infoWin;
})
return marker;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = {
"type": "FeatureCollection",
"features":
[
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-73.563032, 45.495403]
},
"properties": {
"prop0": "value0",
"address": "45.495403,-73.563032"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-73.549762, 45.559673]
},
"properties": {
"prop0": "value0",
"address": "45.559673,-73.549762"
}
}
]
};
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map-canvas"></div>
我正在使用 Google Map loadGeoJson 加载 n 数量的位置数据,除了数据本身不是很好之外,一切正常。通常 gps 坐标会在相同位置放置一个标记,这会破坏 Markerclusterer。作为一项实验,我决定为每个标记添加一点抖动,这不会对位置产生太大影响,但允许 markerclusterer 执行此操作。
问题是我无法访问 gps 数据,也不知道如何访问,我检查了谷歌 API 文档,但没有成功。
如何访问 gps 数据并在将其设置为标记之前对其进行更改?
部分代码
map.data.loadGeoJson('mapdata.json, null, function (features) {
var bounds = new google.maps.LatLngBounds();
markers = features.map(function (feature) {
var markerJitter = feature.getGeometry().get(0); //tried to access data here
var test = markerJitter.lat; this fails too as [[scope]] is in place
var infoWin = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: feature.getGeometry().get(0), //jitter should be present here
title: feature.getProperty("address")
});
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', function (evt) {
closeOtherInfo();
infoWin.setContent('<div id="content">some content</div>');
infoWin.open(map, marker);
infoWindowObj[0] = infoWin;
})
return marker;
});
.... //code continues and works
您正在访问包含坐标的 google.maps.LatLng
对象(即 markerJitter
)。
它没有 .lat 属性,它有 .lat()
函数。
我不确定你的评论 this fails too as [[scope]] is in place
是什么意思。
这是一个函数。您的代码将 test 设置为等于一个函数,这可能不是您想要做的。
代码片段:
function initialize() {
// Create a simple map.
features = [];
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 10,
center: {
lat: 45.495403,
lng: -73.563032
}
});
google.maps.event.addListener(map, 'click', function() {
infowidow.close();
});
// process the loaded GeoJSON data.
// google.maps.event.addListener(map.data, 'addfeature', // );
var features = map.data.addGeoJson(data);
map.data.setMap(null);
var bounds = new google.maps.LatLngBounds();
markers = features.map(function(feature) {
var markerJitter = feature.getGeometry().get(0); //tried to access data here
console.log(markerJitter.toUrlValue(6));
var test = markerJitter.lat; // this fails too as [[scope]] is in place
console.log("markerJitter lat=" + markerJitter.lat() + " lng=" + markerJitter.lng());
var infoWin = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: feature.getGeometry().get(0), //jitter should be present here
title: feature.getProperty("address"),
map: map
});
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent('<div id="content">some content<br>' + this.getTitle() + '</div>');
infoWin.open(map, marker);
infoWindowObj[0] = infoWin;
})
return marker;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = {
"type": "FeatureCollection",
"features":
[
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-73.563032, 45.495403]
},
"properties": {
"prop0": "value0",
"address": "45.495403,-73.563032"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-73.549762, 45.559673]
},
"properties": {
"prop0": "value0",
"address": "45.559673,-73.549762"
}
}
]
};
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map-canvas"></div>