国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Plain——使用同一套代碼創(chuàng)建你的 web 地圖應(yīng)用

loonggg / 926人閱讀

摘要：簡體中文特性如何使用安裝使用安裝，你也可以在頁面中引入構(gòu)建后的文件。順便校正下地圖窗口接下來我們要取消事件監(jiān)聽點擊此處查看更多示例

使用同一套代碼創(chuàng)建你的 web 地圖應(yīng)用。 ? https://github.com/XingzheFE/...

English | 簡體中文

特性

Layers

Marker

Polyline

Popup

Map Controls

zoom

fitView

panTo

Evented

Utils

getBound

locate

coordinate translate

如何使用 安裝

使用 npm 安裝 plain-js，你也可以在頁面中引入構(gòu)建后的 js 文件。

$ npm install plain-js --save
創(chuàng)建地圖

創(chuàng)建地圖的方式很簡單，最直接的方式是在 html 文件中引入地圖庫的腳本文件以及 plain.min.js

// 首先初始化一個 plain 對象
let plain = new Plain();

// 設(shè)置需要使用的坐標(biāo)系，如果不設(shè)置的話所有地圖使用默認(rèn)的坐標(biāo)系，
// Google 和 高德地圖在大陸使用 GCJ02，百度地圖使用 BD09，
// 為了方便開發(fā)建議設(shè)置為 GCJ02
plain.setCoordType("GCJ02");

// 告訴 plain 你需要使用 Google 地圖，
// 可選的參數(shù)有 Google Map "GMAP"， 高德地圖 "AMAP"， 百度地圖 "BMAP"
plain.use("GMAP");

// 創(chuàng)建一個 Google 地圖實例
let map = plain.Map({
    container: "#map",          // DivElement
    center: [39.908012, 116.399348],
    zoom: 15
});

或者使用回調(diào)的方式創(chuàng)建

let plain = new Plain().use("GMAP");
let key = "[your access key]";
plain.loadMap(key, () => {
    let map = window.map = plain.Map({
        container: document.getElementById("map"),
        center: [39.910, 116.404],
        zoom: 15
    });
}, err => {
    // TODO:
};
添加 Marker 
let marker = plain.Marker([39.910, 116.404]);
map.addLayer(marker);   // 也可傳入一個數(shù)組

如果想讓 Marker 變得不一樣也是可以的，在 Marker 方法中傳入第二個參數(shù)：

// 自定義 icon
let icon = plain.Icon({
    url: "https://unpkg.com/leaflet@1.0.3/dist/images/marker-icon.png",
    size: [25, 40],
    anchor: [12.5, 40]
});

// Marker configure option
let markerOpt = {
    icon: icon,
    draggable: true
};
let marker2 = plain.Marker([39.910, 116.404], markerOpt);
map.addLayer(marker2);
map.removeLayer(marker);    // 可以從地圖中移除之前創(chuàng)建的標(biāo)記
添加 Polyline

向地圖中添加折線之前需要先定義一個二維數(shù)組，注意：我們默認(rèn)傳入的坐標(biāo)格式是 [lat: Number, lng: Number]

let path = [
    [39.910, 116.404],
    [39.71, 116.5],
    [39.909, 117],
    [39.710, 118]
];
let polyline = plain.Polyline(path, {
    color: "#f00",
    weight: 2,
    opacity: 0.8
});
map.addLayer(polyline);
自定義覆蓋物及 Popup 
let layer = plain.Layer()
    .setContent("text or Element")
    .setLatLng([31, 116])
    .mount(map)
    .show()
    .hide()
    .unmount();
let popup = plain.Popup({closeBtn: false})
    .setContent(document.createElement("button"))
    .setLatLng([31, 116])
    .mount(map)
    .show()
    .hide()
    .unmount();
事件

到目前為止，我們已經(jīng)可以創(chuàng)建一個展示基本信息的地圖了，那么接下來就給地圖綁定下點擊事件的響應(yīng)方法。
plain 提供了一個工具方法格式化傳入的事件對象，返回的值格式如下

class Event {
    e: any;             // 原始的事件對象
    p: F.LatLng;        // 坐標(biāo) [lat: number, lng: number]
    target: F.Layer;    // 觸發(fā)事件的對象
    type: string;       // 事件名
}

其中坐標(biāo) p 為最初 plain.setCoordType("GCJ02"); 設(shè)置的格式，如果沒有設(shè)置，那么返回的值和原生地圖庫一致。

let listener = map.on("rightclick", function (e) {
    console.log(plain.Util.formatEvent.call(this, e));
    // 順便校正下地圖窗口
    map.fitView(path);
});

接下來我們要取消事件監(jiān)聽：

map.off(listener);
點擊此處查看更多示例
License

plain is MIT licensed.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/104900.html

相關(guān)文章

  • 通過Weex 300行代碼開發(fā)一款簡易的跑步App

    摘要：你就可以在目錄下用或者開發(fā)應(yīng)用代碼了設(shè)計原理結(jié)合了高德地圖多個功能，比如定位，地圖縮放，繪制折現(xiàn)，進(jìn)行點的標(biāo)記等常用功能。文件源代碼打包運行開發(fā)完畢后，我們可以運行命令，讓它安裝到我們的測試手機上。 Weex正如它的目標(biāo)， 一套構(gòu)建高性能、可擴展的原生應(yīng)用的跨平臺開發(fā)方案 Weex 給大家?guī)淼臒o疑是客戶端開發(fā)效率的提升，我們可以通過一套代碼，實現(xiàn)web，android, iOS的三個...

    isaced 評論0 收藏0

  • PHP面試之二：高并發(fā)與大數(shù)據(jù)

    摘要：三態(tài)分別是就緒運行阻塞進(jìn)程的五態(tài)模型在三態(tài)的基礎(chǔ)上發(fā)展而來新建態(tài)運行態(tài)終止態(tài)就緒態(tài)等待態(tài)線程稱之為輕量級的進(jìn)程，程序執(zhí)行流的最小單元。一個進(jìn)程下有多個線程來完成不同的工作稱之為多線程。 web資源防盜鏈 盜鏈?zhǔn)鞘裁矗?為什么要防？ 在自己頁面上顯示一些不是自己服務(wù)器的資源（圖片、音頻、視頻、css、js等）由于別人盜鏈你的資源會加重你的服務(wù)器負(fù)擔(dān)，所以我們需要防止可能會影響統(tǒng)計 防盜鏈...

    Ashin 評論0 收藏0

  • [譯] 解密 Uber 數(shù)據(jù)部門的數(shù)據(jù)可視化最佳實踐

    摘要：讓我們看看都做了哪些工作可視化分析增強數(shù)據(jù)可操作性測試平臺的表格和置信區(qū)間可視化可視化分析主要都是由抽象數(shù)據(jù)可視化組成的。大多數(shù)有效的可視化分析在這種情況下都是關(guān)于報告儀表盤實時分析的圖標(biāo)和網(wǎng)絡(luò)圖。 showImg(https://segmentfault.com/img/remote/1460000006771644); 概述 在2015年初，我們在Uber規(guī)劃了一個官方的數(shù)據(jù)科學(xué)團...

    susheng 評論0 收藏0

  • [譯] 解密 Uber 數(shù)據(jù)部門的數(shù)據(jù)可視化最佳實踐

    摘要：讓我們看看都做了哪些工作可視化分析增強數(shù)據(jù)可操作性測試平臺的表格和置信區(qū)間可視化可視化分析主要都是由抽象數(shù)據(jù)可視化組成的。大多數(shù)有效的可視化分析在這種情況下都是關(guān)于報告儀表盤實時分析的圖標(biāo)和網(wǎng)絡(luò)圖。 showImg(https://segmentfault.com/img/remote/1460000006771644); 概述 在2015年初，我們在Uber規(guī)劃了一個官方的數(shù)據(jù)科學(xué)團...

    darkbug 評論0 收藏0

  • [譯]為什么前端初學(xué)者必須要明白發(fā)布訂閱模式

    摘要：應(yīng)用需要正確并合適響應(yīng)各種網(wǎng)絡(luò)請求用戶操作計時事件和各種延時動作。好了，我們的新流程圖畫出來了提示城市名稱查找不是很復(fù)雜，谷歌地圖為此提供了非常簡單的。形象點表示就是，函數(shù)是一等公民。 By Hubert Zub | Oct 3, 2018 原文 當(dāng)你將關(guān)注點從樣式，美學(xué)和網(wǎng)格系統(tǒng)轉(zhuǎn)移到邏輯，框架和編寫JavaScript代碼時。一切都開始了，你會發(fā)現(xiàn)你處于你的web開發(fā)歷程中最激動人...

    miqt 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<