成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

loonggg / 941人閱讀

摘要：簡體中文特性如何使用安裝使用安裝，你也可以在頁面中引入構(gòu)建后的文件。順便校正下地圖窗口接下來我們要取消事件監(jiān)聽點(diǎ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

// 首先初始化一個(gè) 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)建一個(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/[email protected]/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è)展示基本信息的地圖了，那么接下來就給地圖綁定下點(diǎn)擊事件的響應(yīng)方法。
plain 提供了一個(gè)工具方法格式化傳入的事件對象，返回的值格式如下

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);
點(diǎn)擊此處查看更多示例
License

plain is MIT licensed.

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

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

相關(guān)文章

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

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

    isaced 評論0 收藏0

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

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

    Ashin 評論0 收藏0

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

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

    darkbug 評論0 收藏0

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

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

    susheng 評論0 收藏0

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

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

    miqt 評論0 收藏0

發(fā)表評論

0條評論

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