How to get the extends of single area-type geojson file?
I need the google map to zoom into the extends of single area-type geojson-file.
I can load the geojson file to google maps and make it a data layer:
var myArea = new google.maps.Data();
myArea.loadGeoJson('myArea.geojson');
I can set its settings:
myArea.setStyle({
strokeColor:"#F00",
fillColor:"#00F"
};
But I cannot zoom the view according to its borders.
For "map.fitBounds()" to work, I would need to get the LatLngBounds of myArea.
How to get LatLngBounds from the geoJson-google map data layer?
I have found a lot of information for many other types of data (sheets, polygons, several layers, points, lines) but not one for single geojson-data layer.
I have tried for example:
var bounds = new google.maps.LatLngBounds();
map.data.forEach(function(myArea){
myArea.getGeometry().forEachLatLng(function(latlng){
bounds.extend(latlng);
});
});
map.fitBounds(bounds);
I have also tried to find the extends manually:
var SW = myArea.getSouthWest();
var NW = myArea.getNorthEast();
var bounds = new google.maps.LatLngBounds(SW,NE);
With no success. I think the problem is in the concept of google data layer, but I haven't found anything to go around this problem. Any ideas how to get the bounds of single geojson google map data layer?
2 个答案:
答案 0 :(得分：0)
forEach是异步的。您需要在每个函数调用中或完成所有函数调用时设置映射边界。这对我有用：
map.data.forEach(function(myArea) {
myArea.getGeometry().forEachLatLng(function(latlng) {
bounds.extend(latlng);
map.fitBounds(bounds);
});
});
代码段
＆＃13;
＆＃13;
＆＃13;
＆＃13;
function initialize() {
// Create a simple map.
features = [];
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: {
lat: -28,
lng: 137.883
}
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// process the loaded GeoJSON data.
var bounds = new google.maps.LatLngBounds();
map.data.addGeoJson(data);
map.data.forEach(function(myArea) {
myArea.getGeometry().forEachLatLng(function(latlng) {
bounds.extend(latlng);
map.fitBounds(bounds);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "test",
"desc": "test desc",
"inDailyProgram": true,
"color": "red"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
35.188327,
31.699929,
0
],
[
35.187895,
31.699669,
0
],
[
35.187014,
31.699729,
0
],
[
35.186867,
31.700016,
0
],
[
35.186783,
31.700395,
0
],
[
35.186921,
31.700787,
0
],
[
35.187232,
31.701291,
0
],
[
35.18763,
31.701844,
0
],
[
35.187442,
31.702328,
0
],
[
35.18692,
31.702779,
0
],
[
35.187064,
31.703654,
0
],
[
35.187433,
31.703794,
0
],
[
35.188155,
31.70344,
0
],
[
35.188921,
31.702917,
0
],
[
35.189348,
31.702887,
0
],
[
35.189828,
31.70302,
0
],
[
35.190313,
31.703443,
0
],
[
35.190359,
31.704104,
0
],
[
35.190224,
31.704348,
0
],
[
35.189797,
31.704585,
0
],
[
35.189753,
31.704948,
0
],
[
35.189847,
31.705107,
0
],
[
35.190187,
31.705015,
0
],
[
35.190604,
31.705041,
0
],
[
35.190931,
31.705171,
0
],
[
35.191435,
31.70526,
0
],
[
35.191861,
31.705231,
0
],
[
35.192482,
31.705008,
0
],
[
35.192945,
31.704893,
0
],
[
35.193564,
31.704449,
0
],
[
35.192869,
31.704004,
0
],
[
35.192256,
31.703737,
0
],
[
35.191754,
31.703371,
0
],
[
35.191306,
31.703001,
0
],
[
35.190838,
31.702632,
0
],
[
35.190546,
31.70221,
0
],
[
35.190348,
31.701739,
0
],
[
35.190323,
31.701589,
0
],
[
35.189814,
31.701624,
0
],
[
35.189443,
31.701456,
0
],
[
35.189108,
31.701217,
0
],
[
35.188509,
31.700359,
0
],
[
35.188327,
31.699929,
0
]
]
]
}
}, {
"type": "Feature",
"properties": {
"name": "test",
"desc": "test desc",
"inDailyProgram": true,
"color": "red"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
35.209224,
31.718497,
0
],
[
35.209775,
31.718459,
0
],
[
35.210282,
31.717788,
0
],
[
35.210741,
31.71723,
0
],
[
35.21132,
31.716803,
0
],
[
35.211748,
31.716193,
0
],
[
35.212124,
31.715632,
0
],
[
35.212315,
31.714798,
0
],
[
35.21227,
31.714137,
0
],
[
35.212647,
31.713599,
0
],
[
35.21316,
31.713412,
0
],
[
35.214134,
31.713095,
0
],
[
35.215018,
31.712675,
0
],
[
35.215822,
31.7119,
0
],
[
35.21577,
31.711156,
0
],
[
35.215564,
31.710175,
0
],
[
35.215104,
31.709128,
0
],
[
35.21473,
31.708518,
0
],
[
35.214301,
31.707911,
0
],
[
35.214086,
31.707207,
0
],
[
35.213709,
31.706154,
0
],
[
35.213519,
31.705807,
0
],
[
35.212415,
31.705441,
0
],
[
35.211313,
31.705103,
0
],
[
35.210114,
31.704964,
0
],
[
35.20915,
31.705031,
0
],
[
35.208402,
31.704612,
0
],
[
35.207939,
31.704119,
0
],
[
35.207657,
31.704636,
0
],
[
35.207123,
31.704922,
0
],
[
35.206421,
31.705164,
0
],
[
35.205969,
31.70529,
0
],
[
35.205926,
31.705613,
0
],
[
35.205553,
31.705808,
0
],
[
35.205577,
31.706157,
0
],
[
35.205694,
31.706459,
0
],
[
35.205902,
31.70686,
0
],
[
35.206285,
31.707193,
0
],
[
35.206113,
31.707375,
0
],
[
35.206005,
31.707544,
0
],
[
35.206139,
31.707746,
0
],
[
35.206713,
31.708194,
0
],
[
35.207228,
31.708428,
0
],
[
35.207474,
31.708798,
0
],
[
35.207463,
31.709435,
0
],
[
35.207359,
31.709878,
0
],
[
35.207255,
31.710418,
0
],
[
35.207232,
31.71089,
0
],
[
35.20712,
31.711257,
0
],
[
35.206802,
31.711473,
0
],
[
35.206408,
31.711645,
0
],
[
35.206061,
31.711753,
0
],
[
35.205639,
31.711857,
0
],
[
35.205398,
31.711766,
0
],
[
35.205213,
31.711698,
0
],
[
35.205289,
31.711992,
0
],
[
35.205266,
31.712464,
0
],
[
35.205096,
31.712808,
0
],
[
35.204885,
31.713348,
0
],
[
35.204829,
31.71414,
0
],
[
35.204947,
31.714644,
0
],
[
35.205089,
31.715104,
0
],
[
35.205489,
31.715687,
0
],
[
35.205906,
31.716113,
0
],
[
35.206464,
31.716586,
0
],
[
35.20684,
31.716421,
0
],
[
35.207254,
31.716005,
0
],
[
35.207524,
31.715517,
0
],
[
35.207901,
31.714965,
0
],
[
35.207949,
31.714464,
0
],
[
35.208022,
31.713919,
0
],
[
35.20835,
31.713855,
0
],
[
35.208542,
31.714229,
0
],
[
35.208847,
31.71465,
0
],
[
35.209151,
31.715044,
0
],
[
35.20929,
31.71545,
0
],
[
35.209362,
31.715694,
0
],
[
35.209315,
31.716214,
0
],
[
35.209177,
31.716619,
0
],
[
35.209031,
31.716906,
0
],
[
35.208958,
31.717132,
0
],
[
35.208853,
31.717333,
0
],
[
35.208878,
31.717691,
0
],
[
35.209224,
31.718497,
0
]
]
]
}
}]
};html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
答案 1 :(得分：0)
如果你需要根据一个区域类型（不是点或线）的扩展来设置你的地图GeoJson文件（＆＃34; yourgeojsonfile＆＃34;）
div
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？