import { Component, ViewChild, ElementRef } from '@angular/core';
import { ConferenceData } from '../../providers/conference-data';
import { Dialogs } from 'ionic-native';
import { Platform } from 'ionic-angular';
import { Plus } from '../../providers/plus';
@Component({
selector: 'page-map',
templateUrl: 'map.html'
})
export class MapPage {
plus: any;
@ViewChild('mapCanvas') mapElement: ElementRef;/*通过模版变量注入,但类型是元素类型*/
constructor(public confData: ConferenceData, public platform: Platform, plus: Plus) {
this.platform.ready().then((readySource) => {
this.plus = plus.plus;
// Platform now ready, execute any required native code
});
}
mapEle: any;
ionViewDidLoad() {
//this.baidumap();
this.confData.getMap().subscribe(mapData => {
this.mapEle = this.mapElement.nativeElement;//*拿到原生dom元素,然后,开始干活*/
this.locate();
});
}
map: any;
locate() {
//let wo = ws.opener();
//高德地图坐标为(116.3974357341,39.9085574220), 百度地图坐标为(116.3975,39.9074)
let pcenter = new this.plus.maps.Point(116.3975, 39.9074);
setTimeout(() => {
this.map = new this.plus.maps.Map(this.mapEle.id);
this.map.centerAndZoom(pcenter, 12);
this.createMarker();
// 创建子窗口
//this.createSubview();
}, 1000);
}
createMarker() {
//高德地图坐标为(116.3406445236,39.9630878208), 百度地图坐标为(116.347292,39.968716
let marker = new this.plus.maps.Marker(new this.plus.maps.Point(116.347292, 39.968716));
//marker.setIcon("/logo.png");
marker.setLabel("HBuilder");
var bubble = new this.plus.maps.Bubble("打造最好的HTML5移动开发工具");
marker.setBubble(bubble);
this.map.addOverlay(marker);
}
//createSubview() {
// // 创建加载内容窗口
// let topoffset: string = '44px';
// if (plus.plus.navigator.isImmersedStatusbar()) {// 兼容immersed状态栏模式
// topoffset = (Math.round(plus.plus.navigator.getStatusbarHeight()) + 44) + 'px';
// }
// var wsub = plus.plus.webview.create('maps_map_sub.html', 'sub', { top: topoffset, height: '60px', position: 'absolute', scrollIndicator: 'none', background: 'transparent' });
// plus.plus.webview.currentWebview().append(wsub);
// }
}