Question

我正在构建一个Ionic2应用程序，我使用谷歌地图作为方向图，我需要在地图上放置一个图像层。我正在尝试将建筑布局图像放在Google地图中的建筑群中。我在这里找到了这个javascript的解决方案，这正是我需要的：Google maps js API

我对Ionic2和Anglular2都很陌生，到目前为止还没有好运。

赞赏任何建议

我的代码：

＆＃13;

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);
    });
 
  }

＆＃13;

Answer 1

嗯，显然它比我想象的容易。您只需定义图像边界并创建叠加层的实例，然后将其添加到地图中，就像这样......

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;，您已启动并正在运行。

Ionic2谷歌地图图像层

1 个答案: