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