1.4 ionic入門——leaflet地圖

（1）新建頁面

ionic g page map 

(2) 引入
在app.module.ts引入map頁

import { MapPage } from '../pages/map/map'; 

（3）跳轉
在須要跳轉的界面引入

import { MapPage } from '../pages/map/map'; 

在跳轉按鈕動做中寫入

this.navCtrl.push(MapPage); 

（4）配置leaflet
下載leaflet
https://pan.baidu.com/s/19Qa_uxkqNdQmVfTr1vNEXg
解壓將文件夾放進src/assets中

在index.html中引入

<script src="assets/leaflet/leaflet.js"></script> <script src="assets/leaflet/leaflet.ChineseTmsProviders.js"></script> <link rel="stylesheet" href="assets/leaflet/leaflet.css"> 

（5）顯示地圖
map.html：

<ion-content> <div id="leaflet_map" style="width: 100%;height:100%;position: absolute;z-index: 1;"></div> </ion-content> 

map.ts：
首先聲明

declare var L:any; 

其次

loadLMap(x,y){
    document.getElementById('leaflet_map').innerHTML="<div id='leaflet_map' style='width: 100%;height:100%''></div>"; var map = L.map("leaflet_map",{ center:[x,y], zoom:12, zoomControl:false, dragging:true }); //定義地圖組，並加載天地圖 -> addTo()是加載地圖，下面加載啦底圖和標註 var baseLayers = { "天地圖": L.layerGroup([ L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }).addTo(map), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }).addTo(map) ]), "天地圖影像": L.layerGroup([ L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }) ]), "天地圖地形": L.layerGroup([ L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }) ]), "Google地圖": L.tileLayer('http://mt1.google.cn/vt/lyrs=m@207000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Galile'), "Google影像": L.layerGroup([ L.tileLayer('http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}&s=Gali'), L.tileLayer('http://mt1.google.cn/vt/imgtp=png32&lyrs=h@207000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil') ]), "高德地圖": L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', { subdomains: "1234" }), "高德影像": L.layerGroup([ L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', { subdomains: "1234" }), L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8', { subdomains: "1234" }) ]) }; //控制圖層 L.control.layers(baseLayers, {}, { position: "topright" }).addTo(map); var my_marker = L.marker([x,y],{highlight:'permanent',draggable:true}).addTo(map).on('dragend',function(event){ var marker = event.target; var position=marker.getLatLng(); var la = position.lat; var long=position.lng; }); this.my_marker.enablePermanentHighlight(); L.control.zoom({zoomInTitle:'放大', zoomOutTitle:'縮小',position: 'bottomright'}).addTo(map); } 

初始化

ionViewDidLoad(){
    this.loadLMap(30.374558, 104.09144); }