在uni-app上自带有map组件，但是那个组件功能太弱，很多高级用法很难实现。用npm添加leaflet呢，又各种报错。

偶然和朋友聊起，可以用html来实现leaflet地图，然后用webview组件来加载这个html。webview其实就是一个浏览器内核。它可以渲染html，而且性能可以完全媲美原生。我们试验之后，果然发现非常棒，非常好用。哈哈

这里只粘贴上部分代码，仅供参考，

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<title>实况地图</title>

 <link rel="stylesheet" href="./js/leaflet.css" crossorigin=""/>

<script src="./js/leaflet.js" crossorigin=""></script>

<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>

<script src="./js/axios.min.js"></script>

<script src="./js/date.js"></script>

<script src="./js/aqi.js"></script>

<script type="text/javascript" src="./js/uni.webview.1.5.2.js"></script>

</head>

<body>

<div id="app">

    <div class="Radio">

        <button class="button" v-bind:class="[ i == airIndex ? 'button_on' : '']" v-for="(item,i) in airArr" :key="i" @click="airRadioClick(item.id,i)">

            {{item.mainName}}

        </button>

    </div>

    <div  id="mapid">

        <div class="time_title">

            {{timeTitle}}

        </div>

        <img src="./image/refresh2.png"   class="RefreshIcon" @click="dataRefresh">

        <img src="./image/wind.png"   class="WindIcon" v-bind:class="{WindIcon_on:showWind}" @click="windShow">

    </div>

</div>

<script type="module">

   // import {getPollLevelColor,getPollLevelTextColor} from './js/aqi.js';

   // import { getDateYMD,dateAdd,getDateYMDHMS,DateDiff,DateDiffHour,getDateYMDH,addZero,getDateYMDH_CN} from './js/date.js';

var _self;

var vm = new Vue({

    el : "#app",

    data : {

        timeTitle:"2020年5月19日12时",

        name : "vue",

        map:null,

        baseLayer:null,

        graphicLayer:null,

        siteArr:[],

        airArr:[//单选框数组

            { id: 'aqi', mainName: 'AQI'},

            { id: 'pm25', mainName: 'PM2.5'},

            { id: 'pm10', mainName: 'PM10'},

            { id: 'so2', mainName: 'SO2'},

            { id: 'o3', mainName: 'O3'},

            { id: 'no2', mainName: 'NO2'},

            { id: 'co', mainName: 'CO'},

            { id: 'voc', mainName: 'VOC'},

        ],

        airIndex:0,

        airid:'aqi',

        showWind:true,

    },

uni-app上使用leaflet地图的解决方案的更多相关文章

  1. 针对不同手机系统的LBS地图定位解决方案

    原文:针对不同手机系统的LBS地图定位解决方案 摘要: 针对目前的三种手机系统:Android安卓.S60塞班.IOS苹果,做出的三种不同的手机地图应用解决方案. 查阅了多数地图API对手机的支持情况 ...

  2. GeoServer地图开发解决方案

    转自:http://www.cnblogs.com/beniao/archive/2011/01/08/1930822.html GeoServer 是 OpenGIS Web 服务器规范的 J2EE ...

  3. 移动端app跳转百度地图

    http://lbsyun.baidu.com/index.php?title=uri/guide/helloworld(百度地图调起URI API)开发者只需按照接口规范构造一条标准的URI,便可在 ...

  4. [转]GeoServer地图开发解决方案（一）：环境搭建篇

    GeoServer 是 OpenGIS Web 服务器规范的 J2EE 实现的社区开源项目,利用 GeoServer 可以方便的发布地图数据,允许用户对特征数据进行更新.删除.插入操作,通过 GeoS ...

  5. app上传到App Store的快捷方法及步骤

    跳过证书的申请及配置概要文件的设置, 现在根据已有的配置概要文件及发布证书开始: 1.先在Xcode上的PROJECT和TARGETS->Build Setting->Code Signi ...

  6. iOS app上传错误集锦(转载)

    1.工程里增加了版本自动更新. 2.未增加判断网络状态的类Reachability. 3.问题:error itms -90049 This bundel is invalid. The bundle ...

  7. 笔记本键盘上没有break键的解决方案

    django在Windows上调试需要用ctrl+break终止服务器……笔记本键盘上没有break好尴尬…… 在百度搜了很多都没有找到,最后终于在谷歌上找到了英文版的解决方案. starting o ...

  8. 关于app上页面和js的调试

    不久前折腾了一晚上关于app上的页面和js的调试: 首先得准备几个比较比较常用的工具: 1.chrome(这个都没有你还干啥fe呀) 2.Fiddler(抓包神器,基本也是必备咯) 3.sublime ...

  9. 实现app上对csdn的文章查看，以及文章中图片的保存 （制作csdn app 完结篇）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24022165 今天给大家带来CSDN的完结篇,即增加文章的查看和文章中图片的保存 ...

  10. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

随机推荐

  1. #树形dp，二次扫描换根法#JZOJ 3501 消息传递 with others

    目录 JZOJ 3501 消息传递 题目 分析 代码 简单写就能跳过之题目 JZOJ 3500 物语 题目 分析 代码 JZOJ 3757 洛谷 2354 [NOI 2014] 随机数产生器 题目 分 ...

  2. #单调队列#JZOJ 1753 锻炼身体

    题目 一个\(n*m\)的矩阵,有些格子不能经过,有\(k\)个时段, 要么停留某个格子,要么沿时段规定的方向移动,问最多能够移动多少次 \(n,m,k\leq 200\) 分析 题目已经提示了\(O ...

  3. #正余弦定理#牛客练习赛71 B 烙印

    题目 将三角形的六要素只留下三个已知条件, 问有多少种情况,多组询问 分析 首先分类讨论一下(对新高一不友好,比如说我). 前置知识: 正弦定理: \[\frac{a}{sinA}=\frac{b}{ ...

  4. JDK14性能管理工具:jstat使用介绍

    目录 简介 JStat命令 JStat Output Options class compiler gc gccapacity gcnew gcnewcapacity gcold gcoldcapac ...

  5. MyBatis resultMap中collection过滤空字段

    在使用MyBatis查询数据时,返回值可以定义为resultMap. 如果返回的对象中有列表,还可以使用collection标签进行定义. 此时,如果不想某些字段为空的数据加入列表,可以使用notNu ...

  6. Data Technology时代，如何成为一名优秀的电商数据分析师？

    又是一年春招季,你最近有为找工作或换工作而犯愁吗?现在已经进入春招的"金三银四"决赛圈了,再不好好准备真的是黄花菜都要凉了.那么如何才能在"岗少人多".&quo ...

  7. centos8 \CentOS 9 Stream \Oracle Linux8\Oracle Linux 9 rpm 安装mysql8.0.28 mysql8.0.34

    centos8 rpm 安装mysql8.0.28 检查 检测系统是否自带安装 MySQL 命令如下: rpm -qa | grep mysql 如果如下存在已安装的包,就需要卸载 mysql80-c ...

  8. sql 语句系列(列举非索引外键)[八百章之第九章]

    列举非索引外键 列举出那些外键没有添加索引. 目的: 1.减少锁. 2.外键添加索引,提示了查询性能,因为要与父表做连接查询做笛卡尔积. 下面只要会复制即可,没有会去从新写一遍的. select fk ...

  9. Web Audio API 第5章 音频的分析与可视化

    到目前为止,我们仅讨论了音频的合成与处理,但这仅是 Web Audio API 提供的一半功能.另一半功能则是音频的分析,它播放起来应该是什么样子的.它最典型的例子就是音频可视化,但其实有更多的其它应 ...

  10. 顺通ERP：精细敏捷的设计理念，得到了消费者的喜爱

    顺通ERP是近年来备受关注的一款ERP品牌,其设计精细,操作便捷,备受消费者喜爱.那么,顺通ERP到底怎么样呢?属于什么档次呢? 首先,从品质上来看,顺通ERP具备高度的稳定性,能够确保企业的日常运营 ...