ionic2 百度地图

最近开发一个地图项目，晕，ionic2的google和高德地图很多用，但是百度地图却很少，总算是找到一个，用法如下：

github地址：https://github.com/leftstick/angular2-baidu-map

Install via npm

You can install and manage angular2-baidu-map via npm:

npm install angular2-baidu-map --save

Import

ES2015

import { NgModule }      from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { BaiduMapModule } from 'angular2-baidu-map';//import BaiduMapModuleimport { MainApp } from './demo.app';@NgModule({    imports:      [ BrowserModule, BaiduMapModule ],    declarations: [ MainApp ],    bootstrap:    [ MainApp ]})class AppModule { }

Usage

import {Component, OnInit} from '@angular/core';import { OfflineOptions, ControlAnchor, NavigationControlType } from 'angular2-baidu-map';@Component({    selector: 'map-presentation',    template: `        <h1>Test Baidu-Map<h1>        <baidu-map ak="put your ak here" [options]="opts" [offline]="offlineOpts" (onMapLoaded)="loadMap($event)" (onMarkerClicked)="clickMarker($event)" (onClicked)="clickmap($event)" ></baidu-map>    `,    styles: [`        baidu-map{            width: 500px;            height: 400px;            display: block;        }    `]})export class MainApp implements OnInit {    opts: any;    offlineOpts: OfflineOptions;    ngOnInit() {        this.opts = {            center: {                longitude: 121.506191,                latitude: 31.245554            },            zoom: 17,            markers: [{                longitude: 121.506191,                latitude: 31.245554,                title: 'Where',                content: 'Put description here',                enableDragging: true            }],            geolocationCtrl: {                anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT            },            scaleCtrl: {                anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_LEFT            },            overviewCtrl: {                isOpen: true            },            navCtrl: {                type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE            }        };        this.offlineOpts = {            retryInterval: 5000,            txt: 'NO-NETWORK'        };    }    loadMap(map: any) {        console.log('map instance here', map);    }    clickMarker(marker: any) {        console.log('The clicked marker is', marker);    }    clickmap(e: any) {        console.log(`Map clicked with coordinate: ${e.point.lng}, ${e.point.lat}`);    }}

Be aware that width, height must be specified to baidu-map component. Otherwise, the map cannot be displayed.

Update map dynamically

@Component({    selector: 'map-presentation',    template: `        <baidu-map ak="put your ak here" [options]="opts"></baidu-map>        <button (click)="updateCoordinate($event)">Update Coordinate<button>    `,    styles: [...]})export class MainApp implements OnInit {    opts: any;    ngOnInit() {        ...    }    /**     * the map will be pointed to     * new coordinate once click     * the button     */    updateCoordinate(e: MouseEvent){        this.opts = {            center: {                longitude: 121.500885,                latitude: 31.190032            }        };    }}

API

attributes

ParamTypeDetailsakstringak that should be applied in Baidu Developerprotocolstringprotocol that you want to specify how Baidu-Map loaded. Available choices: http:, https:optionsMapOptionsoptions used to draw the mapofflineOfflineOptionsoptions applied while no-network availableonMapLoadedExpressionExpression to evaluate upon callback, (Event object is available as the map instance)onMarkerClickedExpressionExpression to evaluate upon callback, (Event object is available as the marker instance)onClickedExpressionExpression to evaluate upon callback, (Event object is map clicked event instance)

MapOptions

ParamTypeRequiredDescriptionExamplecenterObjectYesthe point in geographical coordinates

{    longitude: 121.506191,    latitude: 31.245554}

zoomNumberNozoom level which will be displayed on the map. default is 10

15

navCtrlNavigationControlOptions || BooleanNoAdd a NavigationControl to the map. default is true

false

scaleCtrlScaleControlOptions || BooleanNoAdd a ScaleControl to the map. default is true

false

overviewCtrlOverviewMapControlOptions || BooleanNoAdd a OverviewMapControl to the map. default is true

false

enableScrollWheelZoomBooleanNowhether to enableScrollWheelZoom to the map. default is true

false

geolocationCtrlGeolocationControlOptions || BooleanNoAdd GeolocationControl to the map

{    anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT,    offset: { width: 100, height: 200},    showAddressBar: true,    enableAutoLocation: true,    locationIcon: {        url: 'http://xxx/url.png',        size: {            width: 100,            height: 100        }    }}

markersMarker[]Nomarker will be displayed on the map. default is empty

[{    longitude: 121.506191,    latitude: 31.245554,    title: 'Where',    content: 'Put description here'}]

Marker

ParamTypeRequiredDescriptionExamplelongitudeNumberYesThe longitude of geographical coordinate

121.506191

latitudeNumberYesThe latitude of geographical coordinate

31.245554

iconStringNoThe URL of customized ICON

http://xxx/url.png

widthNumberNoThe width of marker

100

heightNumberNoThe height of marker

100

titleStringNoThe title of BMap.InfoWindow, which will be displayed by clicking the marker

Where

contentStringNoThe content of BMap.InfoWindow, which will be displayed by clicking the marker

Put description here

enableMessageBooleanNoWhether to enable SMS in the BMap.InfoWindow

true

autoDisplayInfoWindowBooleanNoWhether to display the BMap.InfoWindow along with the Marker

true

enableDraggingBooleanNoWhether to enable draggable function for the marker

true

OfflineOptions

ParamTypeRequiredDescriptionExampleretryIntervalNumberNointerval used to retry if network is available. 30000ms by default

5000

txtStringNotext to be displayed while no-network available. "OFFLINE" by default

NO-NETWORK

GeolocationControlOptions

ParamTypeRequiredDescriptionExampleanchorControlAnchorNoWhere to place the GeoLocaltionControl

ControlAnchor.BMAP_ANCHOR_TOP_LEFT

offsetSizeNoHorizontal offset of the GeoLocaltionControl

{ width: 100, height: 100}

showAddressBarBooleanNoWhether to display the control panel

true

enableAutoLocationBooleanNoWhether to positioning while map added

true

locationIconIconNoCustomize the icon

{ url: 'http://wwww/xx.png', size: { width: 50, height: 50} }

NavigationControlOptions

ParamTypeRequiredDescriptionExampleanchorControlAnchorNoWhere to place the NavigationControl

ControlAnchor.BMAP_ANCHOR_TOP_LEFT

offsetSizeNoHorizontal offset of the NavigationControl

{ width: 100, height: 100}

typeNavigationControlTypeNoSpecify type of displayed NavigationControl

NavigationControlType.BMAP_NAVIGATION_CONTROL_SMALL

showZoomInfoBooleanNoWhether to display zoom info

true

enableGeolocationBooleanNoWhether to enable Geolocation feature

true

OverviewMapControlOptions

ParamTypeRequiredDescriptionExampleanchorControlAnchorNoWhere to place the OverviewMapControl

ControlAnchor.BMAP_ANCHOR_TOP_LEFT

offsetSizeNoHorizontal offset of the OverviewMapControl

{ width: 100, height: 100}

sizeSizeNoSpecify size of displayed OverviewMapControl

{ width: 100, height: 100 }

isOpenBooleanNoWhether to display OverviewMapControl once map displayed

true

ScaleControlOptions

ParamTypeRequiredDescriptionExampleanchorControlAnchorNoWhere to place the ScaleControl

ControlAnchor.BMAP_ANCHOR_TOP_LEFT

offsetSizeNoHorizontal offset of the ScaleControl

{ width: 100, height: 100}