如何在页面加载离子2时自动加载地图标记？ [英] how to load map marker automatically when page loaded in ionic 2?

问题描述

在Ionic2中，我使用休闲代码在加载页面时加载标记，但显示错误：

  initializeMap（）{
 
 let minZoomLevel = 16; 
 Geolocation.getCurrentPosition（）。then（（position）=> {
 this.map = new google.maps.Map（document.getElementById（'map_canvas'），{
 zoom： minZoomLevel，
 center：new google.maps.LatLng（position.coords.latitude，position.coords.longitude），
 mapTypeControl：false，
 streetViewControl：false，
 disableDefaultUI： true，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
））; 
 var trafficLayer = new google.maps.TrafficLayer（）; 
 trafficLayer.setMap（this.map） ; 
}）; 
 Marker（）{
 let source =origin; 
 let image ='assets / img / Untitled-1.png'; 
 let marker = new google.maps.Marker（{
 map：this.map，
 animation：google.maps.Animation.DROP，
 position：this.map.getCenter （），
 draggable：true 
，icon：image 
}）; 
 this.lastLatLng（marker，source）; 
 
 $ / code> 

在此代码中，我调用 marker（）



  ionViewDidEnter（）{
 this.Marker（）; code> by 
 
} 
  





view-controller.js：471 MapPage ionViewDidEnter错误：无法读取
属性'getCenter'为空

Update 1： Rohit-kumar-vinay要求：


解决方案

唯一我必须做的是在 Geolocation.getCurrentPosition（）结尾调用 this.Marker（）; 功能。非常感谢 Josh Morony 。


in Ionic2 I use the fallowing code to load marker when page loaded but it shows error:

initializeMap() {

let minZoomLevel = 16;
Geolocation.getCurrentPosition().then((position) => {
this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeControl: false,
streetViewControl: false,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(this.map);
  });
Marker(){  
  let source = "origin";
   let image = 'assets/img/Untitled-1.png';   
   let marker = new google.maps.Marker({    
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: this.map.getCenter(),
    draggable: true
    , icon: image
  }); 
  this.lastLatLng(marker,source);
}

in this code I call marker() by

ionViewDidEnter(){
  this.Marker();
}

view-controller.js:471 MapPage ionViewDidEnter error: Cannot read property 'getCenter' of null

Update 1: screenshot after @Rohit-kumar-vinay request:

解决方案

the only thing that i had to do is that call this.Marker(); at the end of Geolocation.getCurrentPosition() function. many thanks to Josh Morony.

这篇关于如何在页面加载离子2时自动加载地图标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！