我将网址传递给google map.data.loadGeoJson(url)api。这将正确访问几何数据并在地图上显示标记。我无法做的是将地图中心放到创建这些地图标记的位置。 我的代码就像这样
var map;
function initialize(url) {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 17,
center: {lat: 26.925, lng: 49.726}
});
// [START snippet-load]
// Load GeoJSON
map.data.loadGeoJson(url);
// [END snippet-load]
// [START snippet-style]
// Set the stroke width, and fill color for each polygon
var featureStyle = {
fillColor: 'red',
strokeWeight: 1
}
map.data.setStyle(featureStyle);
map.data.setStyle(function(feature) {
//alert('feature'+feature)
var locCounter = 0;
while(locCounter == 0) {
//var mylat = LatLngObject.lat();
var key = feature["j"]["j"][0]["j"][0]["j"][0];
if(typeof key == 'undefined') {
break;
}
var counter =[];
var count = 0;
for(var key1 in key) {
counter[count] = key[key1];
if(count >= 1) {
locCounter = 1;
break;
}
count++;
}
}
if(locCounter == 1) {
map.setCenter({lat: counter[0], lng: counter[1]});
}
// if(locCounter == 0) {
//var lang = feature["j"]["j"][0]["j"][0]["j"][0]["A"];
//var lat = feature["j"]["j"][0]["j"][0]["j"][0]["F"];
//map.setCenter({lat: lang, lng: lat});
//locCounter = 1;
// }
var color = 'red';
return /** @type {google.maps.Data.StyleOptions} */({
fillColor: color,
strokeColor: color,
strokeWeight: 2
});
});
}
在上面的代码中,您可以看到我正在尝试读取要素对象以获取经度和纬度,但问题是每次索引完全不相同时。所以有一段时间它会设置正确的中心。我想知道如何从我试图在地图上显示的数据中自动设置中心。
我的网址像这样返回geo json数据
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "EPSG:4326"
}
},
"features": [
{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
39.1206730032052,
21.9142977383938
],
[
39.1187366628205,
21.9142686642138
],
[
39.1187346942698,
21.9147698234573
],
[
39.1187175621506,
21.9149506624937
],
[
39.118656647949,
21.9151905121632
],
[
39.1185728909215,
21.9154056154381
],
[
39.1185005553069,
21.9155712259242
],
[
39.1179679129608,
21.9166968299528
],
[
39.1176224152226,
21.9166930228153
],
[
39.1174549011679,
21.9166701799897
],
[
39.1173568673744,
21.9166473371639
],
[
39.1172921460352,
21.9166283014759
],
[
39.1137560290344,
21.9153067488333
],
[
39.1138593627724,
21.9148531312384
],
[
39.1064385945506,
21.9123032285723
],
[
39.107569441325,
21.9086256288201
],
[
39.1073748688327,
21.9086072633469
],
[
39.107205332236,
21.9085656227793
],
[
39.1070120010293,
21.9084704443391
],
[
39.1068751820215,
21.9083603942674
],
[
39.106753234645,
21.9082027549759
],
[
39.1059115003141,
21.9067334378047
],
[
39.1058490394627,
21.9065906701445
],
[
39.1057955015902,
21.9064508768104
],
[
39.1057776556326,
21.9063110834761
],
[
39.1057776556326,
21.9061504698582
],
[
39.1059352949243,
21.9054098626202
],
[
39.1059858584705,
21.9052700692861
],
[
39.1060929342158,
21.9050975583632
],
[
39.1062416505286,
21.9049369447453
],
[
39.1063544369804,
21.9048531877179
],
[
39.1070597092225,
21.9044120356475
],
[
39.1072253197085,
21.9043135259617
],
[
39.1075679620934,
21.9041403012006
],
[
39.1074993939589,
21.9039598190834
],
[
39.1074565636607,
21.9037980157348
],
[
39.1073899387526,
21.9036552480746
],
[
39.1072471710921,
21.9033126056897
],
[
39.1127949240849,
21.9025555008554
],
[
39.1132113297609,
21.9030849309291
],
[
39.1134909164293,
21.9034477987326
],
[
39.1138418869276,
21.90392666526
],
[
39.1139430140203,
21.9040902532041
],
[
39.1156304484503,
21.9067487060129
],
[
39.1137855730171,
21.9078258086948
],
[
39.1137290608183,
21.9078525776312
],
[
39.1135595242216,
21.9079537047239
],
[
39.1134881403914,
21.9080131912491
],
[
39.1133602443623,
21.9081321642993
],
[
39.1132298816253,
21.9082940033398
],
[
39.1131747376165,
21.9083760233606
],
[
39.1130605234882,
21.9086008824257
],
[
39.1130141239987,
21.9087900495757
],
[
39.1129927088495,
21.9090120532875
],
[
39.1129965159872,
21.9090977138836
],
[
39.1130174552439,
21.9092880707641
],
[
39.1130498159137,
21.9095755096537
],
[
39.1130783694458,
21.9098362985798
],
[
39.1131773550236,
21.9105501368817
],
[
39.1132059085558,
21.9106890974044
],
[
39.1132573049135,
21.9108318650647
],
[
39.113329640528,
21.9109765362938
],
[
39.1134210118307,
21.9111040754037
],
[
39.1135295152526,
21.9112335180826
],
[
39.113601850867,
21.9112982394217
],
[
39.1137255828395,
21.9114010321372
],
[
39.1138340862614,
21.9114714641831
],
[
39.1139197468575,
21.9115152462655
],
[
39.1141253322883,
21.9115970997241
],
[
39.1150433174384,
21.911944570432
],
[
39.1186921019178,
21.9131436998059
],
[
39.1206730032052,
21.9137861542774
],
[
39.1206730032052,
21.9142977383938
]
]
]
]
},
"properties": {
"PHID": 167781,
"LMID": 167690,
"FILE_ID": 167782,
"CREATED_DATE": "2015-07-29T00:00:00.000+0000",
"CREATED_BY": "Admin01",
"FILE_FEATURE_ID": 1
},
"id": "LAYERS_GEOMETRY_DATA.167783"
}
]
}
答案 0 :(得分:0)
通过GeoJSON处理将每个坐标添加到bounds对象,然后使用该边界执行map.fitBounds。请注意,下面的代码仅支持MultiPolygons,但如果您有其他类型,则可以进行扩展。
代码段
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();
google.maps.event.addListener(map.data, 'addfeature', function(e) {
if (e.feature.getGeometry().getType() === 'MultiPolygon') {
var multi = e.feature.getGeometry().getArray();
for (var k = 0; k < multi.length; k++) {
var polys = multi[k].getArray();
for (var i = 0; i < polys.length; i++) {
for (var j = 0; j < polys[i].getLength(); j++) {
bounds.extend(polys[i].getAt(j));
}
}
}
map.fitBounds(bounds);
}
});
map.data.addGeoJson(data);
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = {
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "EPSG:4326"
}
},
"features": [{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
39.1206730032052,
21.9142977383938
],
[
39.1187366628205,
21.9142686642138
],
[
39.1187346942698,
21.9147698234573
],
[
39.1187175621506,
21.9149506624937
],
[
39.118656647949,
21.9151905121632
],
[
39.1185728909215,
21.9154056154381
],
[
39.1185005553069,
21.9155712259242
],
[
39.1179679129608,
21.9166968299528
],
[
39.1176224152226,
21.9166930228153
],
[
39.1174549011679,
21.9166701799897
],
[
39.1173568673744,
21.9166473371639
],
[
39.1172921460352,
21.9166283014759
],
[
39.1137560290344,
21.9153067488333
],
[
39.1138593627724,
21.9148531312384
],
[
39.1064385945506,
21.9123032285723
],
[
39.107569441325,
21.9086256288201
],
[
39.1073748688327,
21.9086072633469
],
[
39.107205332236,
21.9085656227793
],
[
39.1070120010293,
21.9084704443391
],
[
39.1068751820215,
21.9083603942674
],
[
39.106753234645,
21.9082027549759
],
[
39.1059115003141,
21.9067334378047
],
[
39.1058490394627,
21.9065906701445
],
[
39.1057955015902,
21.9064508768104
],
[
39.1057776556326,
21.9063110834761
],
[
39.1057776556326,
21.9061504698582
],
[
39.1059352949243,
21.9054098626202
],
[
39.1059858584705,
21.9052700692861
],
[
39.1060929342158,
21.9050975583632
],
[
39.1062416505286,
21.9049369447453
],
[
39.1063544369804,
21.9048531877179
],
[
39.1070597092225,
21.9044120356475
],
[
39.1072253197085,
21.9043135259617
],
[
39.1075679620934,
21.9041403012006
],
[
39.1074993939589,
21.9039598190834
],
[
39.1074565636607,
21.9037980157348
],
[
39.1073899387526,
21.9036552480746
],
[
39.1072471710921,
21.9033126056897
],
[
39.1127949240849,
21.9025555008554
],
[
39.1132113297609,
21.9030849309291
],
[
39.1134909164293,
21.9034477987326
],
[
39.1138418869276,
21.90392666526
],
[
39.1139430140203,
21.9040902532041
],
[
39.1156304484503,
21.9067487060129
],
[
39.1137855730171,
21.9078258086948
],
[
39.1137290608183,
21.9078525776312
],
[
39.1135595242216,
21.9079537047239
],
[
39.1134881403914,
21.9080131912491
],
[
39.1133602443623,
21.9081321642993
],
[
39.1132298816253,
21.9082940033398
],
[
39.1131747376165,
21.9083760233606
],
[
39.1130605234882,
21.9086008824257
],
[
39.1130141239987,
21.9087900495757
],
[
39.1129927088495,
21.9090120532875
],
[
39.1129965159872,
21.9090977138836
],
[
39.1130174552439,
21.9092880707641
],
[
39.1130498159137,
21.9095755096537
],
[
39.1130783694458,
21.9098362985798
],
[
39.1131773550236,
21.9105501368817
],
[
39.1132059085558,
21.9106890974044
],
[
39.1132573049135,
21.9108318650647
],
[
39.113329640528,
21.9109765362938
],
[
39.1134210118307,
21.9111040754037
],
[
39.1135295152526,
21.9112335180826
],
[
39.113601850867,
21.9112982394217
],
[
39.1137255828395,
21.9114010321372
],
[
39.1138340862614,
21.9114714641831
],
[
39.1139197468575,
21.9115152462655
],
[
39.1141253322883,
21.9115970997241
],
[
39.1150433174384,
21.911944570432
],
[
39.1186921019178,
21.9131436998059
],
[
39.1206730032052,
21.9137861542774
],
[
39.1206730032052,
21.9142977383938
]
]
]
]
},
"properties": {
"PHID": 167781,
"LMID": 167690,
"FILE_ID": 167782,
"CREATED_DATE": "2015-07-29T00:00:00.000+0000",
"CREATED_BY": "Admin01",
"FILE_FEATURE_ID": 1
},
"id": "LAYERS_GEOMETRY_DATA.167783"
}]
}
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>