在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. C++设计模式 - 抽象工厂(Abstract Factory)

    对象创建模式 通过"对象创建" 模式绕开new,来避免对象创建(new)过程中所导致的紧耦合(依赖具体类),从而支持对象创建的稳定.它是接口抽象之后的第一步工作. 典型模式 Fac ...

  2. OpenHarmony持久化存储UI状态:PersistentStorage

      前两个小节介绍的LocalStorage和AppStorage都是运行时的内存,但是在应用退出再次启动后,依然能保存选定的结果,是应用开发中十分常见的现象,这就需要用到PersistentStor ...

  3. 探索基于WebRTC的有感录屏技术开发流程

    第一章:技术原理 WebRTC(Web Real-Time Communication)是一种开放源代码项目,旨在通过浏览器之间的点对点通信实现实时音视频通信.WebRTC利用JavaScript A ...

  4. Push failed idea将项目发布到gitHub失败

    此时需要点击VCS --> inport into version..-->create git ...重新生成仓库

  5. Unity 检测FPS工具

    检测FPS工具 public class FPS : MonoBehaviour { public float f_UpdateInterval = 0.5F; private float f_Las ...

  6. HarmonyOS—UI 开发性能提升的推荐方法

    注:本文转载自 HarmonyOS 官网文档 开发者若使用低性能的代码实现功能场景可能不会影响应用的正常运行,但却会对应用的性能造成负面影响.本章节列举出了一些可提升性能的场景供开发者参考,以避免应用 ...

  7. 一步一步实现 .NET 8 部署到 Docker

    一.前言 本文仅针对操作系统为 CentOS 8 的环境下部署方法进行讲述.如有需要,后续将在其他文章中进行其他系统下的部署方式讲解. 二.准备工作 确保服务器已安装 docker. 可以通过命令 d ...

  8. ORA-02303: cannot drop or replace a type with type or table dependents,即无法使用类型或表的相关性来删除或取代一个类型

    ORA-02303: cannot drop or replace a type with type or table dependents,即无法使用类型或表的相关性来删除或取代一个类型 在修改一个 ...

  9. 力扣326(java)-3的幂(简单)

    题目: 给定一个整数,写一个函数来判断它是否是 3 的幂次方.如果是,返回 true :否则,返回 false . 整数 n 是 3 的幂次方需满足:存在整数 x 使得 n == 3x 示例 1: 输 ...

  10. HarmonyOS NEXT应用开发之多层嵌套类对象监听

    介绍 本示例介绍使用@Observed装饰器和@ObjectLink装饰器来实现多层嵌套类对象属性变化的监听. 效果图预览 使用说明 加载完成后显示商品列表,点击刷新按钮可以刷新商品图片和价格. 实现 ...