为什么有时 google map 在 ionic 中无法正确显示?
Why some times google map doesn't fit correctly in ionic?
在 Ionic Project 的以下代码中,有时 map
不能正确地适合中心
代码:
initMap() {
this.mapInitialised = true;
this.bounds = new google.maps.LatLngBounds();
this.Geolocation.getCurrentPosition().then((position) => {
this.location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: this.location,
zoom: 15,
draggable: true,
backgroundColor: 'white',
fullscreenControl: false,
mapTypeControl: false,
zoomControl: true,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
this.map.fitBounds(this.bounds); //# auto - zoom
this.map.panToBounds(this.bounds);
console.log(this.location);
this.PostMarker(this.Postlatlng);
this.CurrentMarker(this.location);
});
}
CurrentMarker(location){
console.log(location.lat, location.lng);
let image = 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png';
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: location,
icon: image
});
this.bounds.extend(new google.maps.LatLng(location.lat(), location.lng()));
}
PostMarker(location) {
console.log(location.lat,location.lng);
let image = 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png';
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: location,
icon: image
});
this.bounds.extend(new google.maps.LatLng(location.lat, location.lng));
}
输出:
缩小后:
更新
正如您在屏幕的输出地图中看到的那样,是太平洋,而测试数据点是西藏的一个地方,第二个点是我目前在伊朗的位置。它没有在屏幕上显示这两个点,而是显示错误 location/area。
当两点彼此相距太远时,通常会发生此问题。在附近的位置我看到过一两次这个问题。
设置minZoom
地图选项。否则,您发布的屏幕截图显示了当您缩小到 0 时 API(正确)的行为方式。
例如:
new google.maps.Map(element,{minZoom:3});
在 Ionic Project 的以下代码中,有时 map
不能正确地适合中心
代码:
initMap() {
this.mapInitialised = true;
this.bounds = new google.maps.LatLngBounds();
this.Geolocation.getCurrentPosition().then((position) => {
this.location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: this.location,
zoom: 15,
draggable: true,
backgroundColor: 'white',
fullscreenControl: false,
mapTypeControl: false,
zoomControl: true,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
this.map.fitBounds(this.bounds); //# auto - zoom
this.map.panToBounds(this.bounds);
console.log(this.location);
this.PostMarker(this.Postlatlng);
this.CurrentMarker(this.location);
});
}
CurrentMarker(location){
console.log(location.lat, location.lng);
let image = 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png';
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: location,
icon: image
});
this.bounds.extend(new google.maps.LatLng(location.lat(), location.lng()));
}
PostMarker(location) {
console.log(location.lat,location.lng);
let image = 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png';
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: location,
icon: image
});
this.bounds.extend(new google.maps.LatLng(location.lat, location.lng));
}
输出:
缩小后:
更新 正如您在屏幕的输出地图中看到的那样,是太平洋,而测试数据点是西藏的一个地方,第二个点是我目前在伊朗的位置。它没有在屏幕上显示这两个点,而是显示错误 location/area。 当两点彼此相距太远时,通常会发生此问题。在附近的位置我看到过一两次这个问题。
设置minZoom
地图选项。否则,您发布的屏幕截图显示了当您缩小到 0 时 API(正确)的行为方式。
例如:
new google.maps.Map(element,{minZoom:3});