亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

loonggg / 1030人閱讀

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

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

English | 簡(jiǎn)體中文

特性

Layers

Marker

Polyline

Popup

Map Controls

zoom

fitView

panTo

Evented

Utils

getBound

locate

coordinate translate

如何使用 安裝

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

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

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

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

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

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

// 創(chuàng)建一個(gè) Google 地圖實(shí)例
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);   // 也可傳入一個(gè)數(shù)組

如果想讓 Marker 變得不一樣也是可以的，在 Marker 方法中傳入第二個(gè)參數(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

向地圖中添加折線之前需要先定義一個(gè)二維數(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)建一個(gè)展示基本信息的地圖了，那么接下來(lái)就給地圖綁定下點(diǎn)擊事件的響應(yīng)方法。
plain 提供了一個(gè)工具方法格式化傳入的事件對(duì)象，返回的值格式如下

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

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

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

接下來(lái)我們要取消事件監(jiān)聽(tīng)：

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

plain is MIT licensed.

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104900.html

相關(guān)文章

  • 通過(guò)Weex 300行代碼開(kāi)發(fā)一款簡(jiǎn)易的跑步App

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

    isaced 評(píng)論0 收藏0

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

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

    Ashin 評(píng)論0 收藏0

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

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

    susheng 評(píng)論0 收藏0

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

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

    darkbug 評(píng)論0 收藏0

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

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

    miqt 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<