Ionic开发文档

百度地图

发布时间 2018-11-24 15:14:39   浏览量()   收藏(1)
ionViewDidLoad() {
let map =
this.map =
new BMap.Map(
this.map_container.nativeElement,
{
enableMapClick: true//点击拖拽

}
);
let point = new BMap.Point(119.829937, 31.275124);//坐标可以通过百度地图坐标拾取器获取 
map.centerAndZoom(point, 12);//设置中心和地图显示级别 
map.addControl(new BMap.MapTypeControl());
// map.setCurrentCity("宜兴");  let sizeMap = new BMap.Size(10, 80);//显示位置 
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom(true);//启动滚轮放大缩小,默认禁用  
map.enableContinuousZoom(true);//连续缩放效果,默认禁用 
//  map.disableDragging(true); //禁止拖拽  
}

完整代码:


<ion-content >
<div #map id="map_container2" class="map_container2"></div>
</ion-content>


import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { HttpServiceProvider } from '../../providers/http-service/http-service';
import { ConfigProvider } from '../../providers/config/config';
import { state } from '@angular/core/src/animation/dsl';
import { ModelProvider } from '../../providers/model/model';
import { App } from 'ionic-angular/components/app/app';
import { AlertController } from 'ionic-angular';
import { NewformPage } from '../newform/newform';
/**
 * Generated class for the BaidumapPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
declare var BMap;
declare var BMAP_STATUS_SUCCESS;
// declare var LocationPlugin;
@IonicPage()
@Component({
selector: 'page-baidumap',
templateUrl: 'baidumap.html',
})
export class BaidumapPage {
@ViewChild('map') map_container: ElementRef;
map: any;//地图对象
marker: Array<any> = [];//标记
geolocation1: any;
myIcon: any;
constructor(public alertCtrl: AlertController, public modalCtrl: ModalController, public navCtrl: NavController, public navParams: NavParams, public appService: HttpServiceProvider, private config: ConfigProvider) {
this.myIcon = new BMap.Icon("assets/imgs/local3.png", new BMap.Size(30, 30));
//this.ionViewDidLoad();
var _that = this;
_that.appService.httpGet(_that.config.API.mapdata, {}, rs => {
var response = JSON.parse(rs);
this.marker = response;
for (let item of this.marker) {
if (item.longitude != '' && item.latitude != '') {
this.getLocationByLatLon(item.longitude, item.latitude, item);
}

}
})

}

ionViewDidLoad() {
let map =
this.map =
new BMap.Map(
this.map_container.nativeElement,
{
enableMapClick: true//点击拖拽

}
);
let point = new BMap.Point(119.829937, 31.275124);//坐标可以通过百度地图坐标拾取器获取 
map.centerAndZoom(point, 12);//设置中心和地图显示级别 
map.addControl(new BMap.MapTypeControl());
// map.setCurrentCity("宜兴");  let sizeMap = new BMap.Size(10, 80);//显示位置 
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom(true);//启动滚轮放大缩小,默认禁用  
map.enableContinuousZoom(true);//连续缩放效果,默认禁用 
//  map.disableDragging(true); //禁止拖拽  
}

//定位图标点击事件
addClickHandler(target, data) {
var _that = this;
target.addEventListener("click", function () {
let modal = _that.modalCtrl.create("MapdetailPage", data);
modal.present();
});

// target.addEventListener("click", function () {
//   let alert = _that.alertCtrl.create();
//   alert.setTitle(data.projectName);
//   alert.addInput({
//     type:'label',
//     value:'项目名称:'+data.projectName,
//     disabled:true

//   });
//   alert.addInput({
//     type:'label',
//     value:'概算:'+data.budget,
//     disabled:false

//   });
//   alert.present();
//   })



}



//根据坐标定位
getLocationByLatLon(lon, lau, data) {

let point = new BMap.Point(lon, lau);
let marker = this.marker = new BMap.Marker(point, { icon: this.myIcon });
this.map.addOverlay(marker);
this.map.centerAndZoom(point, 12);

this.addClickHandler(marker, data);
}






}


广告会让浏览体验不好,可这是网站的唯一收入,请点击下面的百度广告,支持老高的开源行动吧!