我不能在 MultiLineString 中使用 feature.get Geometry ()
I can not use feature.get Geometry () in a MultiLineString
我正在使用 google 地图 api v3 在我的地图上绘制 GeoJSON。有了图层点,它就正常运行了。但是我有一个 MultiLineString Camda,并且将地图居中放置在几何图形上,因此 error.This 也出现在多边形中,但这些点效果很好。有没有其他方法可以集中到 MultiLineString 和 Polygons?
google.maps.event.addListener(cicloviasLayer, 'addfeature', function (e) {
console.log(e.feature.getGeometry().getType()); // MultiLineString Ok!
map.setCenter(e.feature.getGeometry().get());
});
错误:
e.feature.getGeometry(...).get is not a function
Data.MultiLineString class 没有 get
方法,它有 getAt
和 getArray
方法。
getAt(n:number)
Return Value: Data.LineString
Returns the n-th contained Data.LineString.
返回的 LineString 有一个 getAt
方法 returns 一个 google.maps.LatLng
对象
getAt(n:number)
Return Value: LatLng
Returns the n-th contained LatLng.
google.maps.event.addListener(cicloviasLayer, 'addfeature', function (e) {
console.log(e.feature.getGeometry().getType()); // MultiLineString Ok!
// will center the map on the first vertex of the first LineString
map.setCenter(e.feature.getGeometry().getAt(0).getAt(0));
});
代码片段:
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: {
lat: -28,
lng: 137
},
});
map.data.setStyle({
strokeColor: "blue",
strokeWeight: 4,
});
google.maps.event.addListener(map.data, 'addfeature', function(e) {
console.log(e.feature.getGeometry().getType()); // MultiLineString Ok!
// will center the map on the first vertex of the first LineString
map.setCenter(e.feature.getGeometry().getAt(0).getAt(0));
var marker = new google.maps.Marker({
position: e.feature.getGeometry().getAt(0).getAt(0),
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
}
})
});
map.data.addGeoJson({
"type": "Feature",
geometry: {
"type": "MultiLineString",
"coordinates": [
[
[-105.021443,
39.578057
],
[-105.021507,
39.577809
],
[-105.021572,
39.577495
],
[-105.021572,
39.577164
],
[-105.021572,
39.577032
],
[-105.021529,
39.576784
]
],
[
[-105.019898,
39.574997
],
[-105.019598,
39.574898
],
[-105.019061,
39.574782
]
],
[
[-105.017173,
39.574402
],
[-105.01698,
39.574385
],
[-105.016636,
39.574385
],
[-105.016508,
39.574402
],
[-105.01595,
39.57427
]
],
[
[-105.014276,
39.573972
],
[-105.014126,
39.574038
],
[-105.013825,
39.57417
],
[-105.01331,
39.574452
]
]
]
}
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Simple</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
</body>
</html>
我正在使用 google 地图 api v3 在我的地图上绘制 GeoJSON。有了图层点,它就正常运行了。但是我有一个 MultiLineString Camda,并且将地图居中放置在几何图形上,因此 error.This 也出现在多边形中,但这些点效果很好。有没有其他方法可以集中到 MultiLineString 和 Polygons?
google.maps.event.addListener(cicloviasLayer, 'addfeature', function (e) {
console.log(e.feature.getGeometry().getType()); // MultiLineString Ok!
map.setCenter(e.feature.getGeometry().get());
});
错误:
e.feature.getGeometry(...).get is not a function
Data.MultiLineString class 没有 get
方法,它有 getAt
和 getArray
方法。
getAt(n:number)
Return Value: Data.LineString
Returns the n-th contained Data.LineString.
返回的 LineString 有一个 getAt
方法 returns 一个 google.maps.LatLng
对象
getAt(n:number)
Return Value: LatLng
Returns the n-th contained LatLng.
google.maps.event.addListener(cicloviasLayer, 'addfeature', function (e) {
console.log(e.feature.getGeometry().getType()); // MultiLineString Ok!
// will center the map on the first vertex of the first LineString
map.setCenter(e.feature.getGeometry().getAt(0).getAt(0));
});
代码片段:
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: {
lat: -28,
lng: 137
},
});
map.data.setStyle({
strokeColor: "blue",
strokeWeight: 4,
});
google.maps.event.addListener(map.data, 'addfeature', function(e) {
console.log(e.feature.getGeometry().getType()); // MultiLineString Ok!
// will center the map on the first vertex of the first LineString
map.setCenter(e.feature.getGeometry().getAt(0).getAt(0));
var marker = new google.maps.Marker({
position: e.feature.getGeometry().getAt(0).getAt(0),
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
}
})
});
map.data.addGeoJson({
"type": "Feature",
geometry: {
"type": "MultiLineString",
"coordinates": [
[
[-105.021443,
39.578057
],
[-105.021507,
39.577809
],
[-105.021572,
39.577495
],
[-105.021572,
39.577164
],
[-105.021572,
39.577032
],
[-105.021529,
39.576784
]
],
[
[-105.019898,
39.574997
],
[-105.019598,
39.574898
],
[-105.019061,
39.574782
]
],
[
[-105.017173,
39.574402
],
[-105.01698,
39.574385
],
[-105.016636,
39.574385
],
[-105.016508,
39.574402
],
[-105.01595,
39.57427
]
],
[
[-105.014276,
39.573972
],
[-105.014126,
39.574038
],
[-105.013825,
39.57417
],
[-105.01331,
39.574452
]
]
]
}
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Simple</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
</body>
</html>