[英]Ionic 2: Map markers not appearing
我正在尝试显示地图标记但无济于事。
构造函数:
constructor(navController, platform, app) {
this.navController = navController;
this.platform = platform;
this.app = app;
platform.ready().then(() => {
this.initializeMap();
});
}
逻辑:
initializeMap() {
Geolocation.getCurrentPosition().then((resp) => {
console.log("Lat: ", resp.coords.latitude);
console.log("Long: ", resp.coords.longitude);
});
let locationOptions = {timeout: 30000, enableHighAccuracy: true};
navigator.geolocation.getCurrentPosition(
(position) => {
let options = {
// /new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
setMyLocationEnabled: true
}
this.map = new google.maps.Map(document.getElementById("map_canvas"), options);
},
(error) => {
console.log(error);
}, locationOptions
);
var myLatLng = new google.maps.LatLng(1.290270,103.851959);
var marker = new google.maps.Marker({
position: myLatLng,
title: 'Hello World!',
});
var map = google.maps.Map(document.getElementById("map_canvas"));
marker.setMap(map);
}
一切正常,只是地图标记没有出现。
我尝试创建地图的新实例并将其他地图的 z-index 设置为 1,但它也没有出现。即使将整个标记函数放在内部函数中也不起作用。
我猜这可能与我的“var map”无法定位 map_canvas 有关。 在这种情况下我该怎么做?
更新:即使在遵循 Will 的建议并尝试使用或不使用 setInterval 之后,标记也不会出现。
var myVar = setTimeout(myFunction, 5000);
function myFunction(){
var myLatLng = new google.maps.LatLng(1.290270,103.851959);
var marker = new google.maps.Marker({
position: myLatLng,
title: 'Hello World!',
});
console.log("poof");
marker.setMap(this.map);
}
更新 2:在我的 css 中,我添加了以下代码行,这会导致我的标记不出现。
div{
max-width:100%;
max-height:100%;
}
用 Will 的答案删除它是有效的。
我还没有在 Ionic 2 中使用过这样的谷歌地图,但这就是你出错的地方......
你正在做的是:
this.map
var map;
第一个问题是点 2 仅在点 1 的异步回调完成时发生。 此时,第 3 步已经启动,因此您在技术上将标记添加到空。
第二个问题是您将标记设置为与地图设置不同的变量,因此无论如何它都不会显示标记。
你需要做的是:
this.map
这样,无论第 3 步是否在第 4 步之前运行(由于异步地理定位调用),您的地图都已经初始化并且标记将出现。
所以你的代码应该更像这样(可能不完全正确但做事的顺序应该是正确的)......
initializeMap() {
Geolocation.getCurrentPosition().then((resp) => {});
//initialise map
let options = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
setMyLocationEnabled: true
}
this.map = new google.maps.Map(document.getElementById("map_canvas"), options);
//get geolocation and set center
let locationOptions = { timeout: 30000, enableHighAccuracy: true };
navigator.geolocation.getCurrentPosition((position) => {
//setCenter should be a method to let you dynamically change the center of the map
this.map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
}, (error) => {}, locationOptions);
//create marker and set to initialised map
var myLatLng = new google.maps.LatLng(1.290270, 103.851959);
var marker = new google.maps.Marker({ position: myLatLng, map: this.map, title: 'Hello World!'});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.