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