Ionic2谷歌地圖圖像層

我正在構建一個Ionic2應用程序，我使用谷歌地圖作爲方向地圖，我需要在地圖上放置一個圖像層。我試圖將建築物佈局圖像放在Google地圖上的建築羣中。我在這裏找到了javascript的解決方案，這正是我所需要的：Google maps js API Ionic2谷歌地圖圖像層

我對Ionic2和Anglular2相當陌生，至今沒有計算出它的運氣。

任何意見讚賞

我的代碼：

import { Component, ViewChild, ElementRef } from '@angular/core'; 
 
import { NavController } from 'ionic-angular'; 
 
import { Geolocation } from '@ionic-native/geolocation'; 
 

 

 
declare var google; 
 

 
@Component({ 
 
    selector: 'map', 
 
    templateUrl: 'map.html' 
 
}) 
 
export class MapPage { 
 

 
@ViewChild('map') mapElement: ElementRef; 
 
map: any; 
 
    
 
lat : any ; 
 
lng : any ; 
 
    
 

 
constructor(public navCtrl: NavController, public geolocation: Geolocation) { 
 
    this.getGeoLocation(); 
 
    
 
    } 
 

 
initializeMap() { 
 
    var minZoomLevel = 17; 
 
    
 
     let mapOptions = 
 
     { 
 
     zoom: minZoomLevel, 
 
     center: new google.maps.LatLng(lat, lng), 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     } 
 
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions); 
 
    } 
 

 
    getGeoLocation(){ 
 
    this.geolocation.getCurrentPosition().then((position) => { 
 
     this.lat = position.coords.latitude; 
 
     this.lng = position.coords.longitude; 
 
     this.initializeMap(); 
 
     
 
    }, (err) => { 
 
     console.log(err); 
 
    }); 
 
    
 
    }

來源

2017-04-22 Martin Repo Repicky

嗯，顯然它比我想象的更容易。你剛纔定義圖像邊界，並創建一個疊加的一個實例，然後將其添加到地圖中像這樣...

var oldBuilding = { 
     north: 53.27959, 
     west: -9.01287, 
     south: 53.278038, 
     east: -9.00876 
    }; 
this.oldBuildingOverLay = new google.maps.GroundOverlay('../assets/Map.png', oldBuilding); 
this.oldBuildingOverLay.setMap(this.map);

聲明oldBuildingOverlay: any;，你是啓動和運行。

來源

2017-06-04 10:53:11

Ionic2谷歌地圖圖像層

回答

相關問題