如何解决使用tomtom mapfit的错误?
How to solve error on using tomtom mapfit?
根据本指南:https://developer.tomtom.com/blog/build-different/adding-tomtom-maps-django-app-building-front-end-map
我正在尝试将 tomtom 用于我的 django 项目,除了地图应该根据我给它的坐标缩放的缩放部分外,一切都运行良好。
我在资源管理器控制台日志中得到的错误是:
Uncaught (in promise) Error: `LngLatLike` argument must be specified as a LngLat instance, an object {lng: <lng>, lat: <lat>}, an object {lon: <lng>, lat: <lat>}, or an array of [<lng>, <lat>]
我试过的代码运行:
// create the map
tt.setProductInfo('Google Map', '1.0');
let map = tt.map({
key: '',
container: 'map'
});
// add store markers
let bounds = []
let storeLocations = JSON.parse("{{ locations|escapejs }}");
for (let storeLocation of storeLocations) {
let coordinates = [storeLocation.longitude, storeLocation.latitude];
bounds.push(coordinates);
// create popup to display store information when the marker is clicked
let popup = new tt.Popup().setHTML(`
<div class="locator-popup">
<h6>Store Name</h6>
<p>${storeLocation.name}</p>
<h6>Address</h6>
<p>${storeLocation.address}</p>
</div>
`);
let marker = new tt.Marker()
.setLngLat(coordinates)
.setPopup(popup)
.addTo(map);
}
// zoom the map to fit all markers
map.on('load', () => {
console.log(bounds)
map.fitBounds(bounds, {
padding: { top: 50, bottom:50, left: 50, right: 50 }
});
})
注意:我想这可能是因为 'bounds'。所以,检查了 'console.log(bounds)' 的输出,结果是:
[Array(2)]
0: (2) [51.34912743809577, 35.701243277665895]
length: 1
lastIndex: (...)
lastItem: (...)
[[Prototype]]: Array(0)
加载时地图应该缩放
fitBounds() 需要两个角 - 西南点和东北点。
这个错误或多或少表明它没有得到 LngLatLike 参数。但实际上它需要两个。
因此要修复代码 - 如果您在数组中只有一个商店,那么您可以在边界数组中复制该位置。
类似于:
if (bounds.length = 1) {
bounds.push(bounds[0])
}
根据本指南:https://developer.tomtom.com/blog/build-different/adding-tomtom-maps-django-app-building-front-end-map 我正在尝试将 tomtom 用于我的 django 项目,除了地图应该根据我给它的坐标缩放的缩放部分外,一切都运行良好。 我在资源管理器控制台日志中得到的错误是:
Uncaught (in promise) Error: `LngLatLike` argument must be specified as a LngLat instance, an object {lng: <lng>, lat: <lat>}, an object {lon: <lng>, lat: <lat>}, or an array of [<lng>, <lat>]
我试过的代码运行:
// create the map
tt.setProductInfo('Google Map', '1.0');
let map = tt.map({
key: '',
container: 'map'
});
// add store markers
let bounds = []
let storeLocations = JSON.parse("{{ locations|escapejs }}");
for (let storeLocation of storeLocations) {
let coordinates = [storeLocation.longitude, storeLocation.latitude];
bounds.push(coordinates);
// create popup to display store information when the marker is clicked
let popup = new tt.Popup().setHTML(`
<div class="locator-popup">
<h6>Store Name</h6>
<p>${storeLocation.name}</p>
<h6>Address</h6>
<p>${storeLocation.address}</p>
</div>
`);
let marker = new tt.Marker()
.setLngLat(coordinates)
.setPopup(popup)
.addTo(map);
}
// zoom the map to fit all markers
map.on('load', () => {
console.log(bounds)
map.fitBounds(bounds, {
padding: { top: 50, bottom:50, left: 50, right: 50 }
});
})
注意:我想这可能是因为 'bounds'。所以,检查了 'console.log(bounds)' 的输出,结果是:
[Array(2)]
0: (2) [51.34912743809577, 35.701243277665895]
length: 1
lastIndex: (...)
lastItem: (...)
[[Prototype]]: Array(0)
加载时地图应该缩放
fitBounds() 需要两个角 - 西南点和东北点。 这个错误或多或少表明它没有得到 LngLatLike 参数。但实际上它需要两个。
因此要修复代码 - 如果您在数组中只有一个商店,那么您可以在边界数组中复制该位置。
类似于:
if (bounds.length = 1) {
bounds.push(bounds[0])
}