uniapp中h5端如何引用本地json数据(json文件)

ops/2024/11/17 17:55:06/

前言

uniapp读取本地json数据文件,有下面两种方式可以实现:

  • 文件后缀为.json类型
  • 文件后缀为.js类型

这里展示后缀为.js类型的处理方式

1、在static中创建后缀为.js的文件存储json数据。

注意使用export导出

2、在要使用的页面导入

<template>  
<view class="map-wrap">  <!-- #ifdef APP-PLUS || H5 -->  <view id="map-box">  <!-- 这里是mapbox的地图容器 -->  </view>  <!-- #endif -->  
</view>  
</template>  <script module="mapbox" lang="renderjs">const mapboxgl = require('!mapbox-gl/dist/mapbox-gl.js');import 'mapbox-gl/dist/mapbox-gl.css';import {point} from '../../static/point.js'//let map = null //地图实例  let dataPoint={type: 'FeatureCollection',features:[{type: 'Feature',properties: {size: 20,name: '武汉'},geometry: {type: 'Point',coordinates: [114.30122, 30.598213]}}]}export default {  data:{  return(){  map: null//地图实例  }  },  mounted() { this.createdMap()  this.map.addControl(new mapboxgl.FullscreenControl(), 'top-left')this.map.on('click',e=>{console.log(e)console.log(this.map)})if(this.map){this.map.on('style.load',()=>{this.map.addSource('source', {type: 'geojson',data: point})this.map.addLayer({id: 'layer',type: 'circle',source: 'source',paint: {'circle-radius': 20,'circle-color': '#ff0000'}}) })this.map.on('click','layer',(e)=>{console.log(e.features[0])this.map.setPaintProperty('layer','circle-color','green')})}},  methods: {  createdMap() { //创建地图                 mapboxgl.accessToken = '你的token';  this.map = new mapboxgl.Map({  container: 'map-box', // container ID  style:  {version: 8,sources: {'raster-tiles': {type: 'raster',tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],tileSize: 256}},layers: [{id: 'simple-tiles',type: 'raster',source: 'raster-tiles',minzoom: 0,maxzoom: 22}]}, // style URL  center: [114.124064, 30.463405], // starting position [lng, lat]  zoom: 9 // starting zoom  });  },}  }  
</script><style>.map-wrap {  position: relative;  min-width: 100vw;  min-height: 100vh;  }  #map-box {  top: 0;  left: 0;  bottom: 0;  right: 0;  position: absolute;  }  #map-box /deep/ .mapboxgl-ctrl-geocoder {  min-width: 140px;  }  #map-box /deep/ .mapboxgl-ctrl-geocoder input[type="text"] {  height: 30px;  }  #map-box /deep/ .mapboxgl-ctrl-geocoder .geocoder-icon-search {  top: 5px;  }  #map-box /deep/ .mapboxgl-ctrl-geocoder .geocoder-pin-right * {  top: 5px;  }  .control-box {  padding: 10rpx 30rpx;  background-color: #00AAFF;  position: absolute;  right: 0;  top: 0;  z-index: 999px;  }  
</style>


http://www.ppmy.cn/ops/134485.html

相关文章

高光谱深度学习调研

综述 高光谱深度学习只有小综述&#xff0c;没有大综述。小综述里面场景分类、目标检测的综述比较多。 Wang C, Liu B, Liu L, et al. A review of deep learning used in the hyperspectral image analysis for agriculture[J]. Artificial Intelligence Review, 2021, 54(7)…

CentOS8 启动错误,enter emergency mode ,开机直接进入紧急救援模式,报错 Failed to mount /home 解决方法

先看现场问题截图&#xff1a; 1.根据提示 按 ctrld 输入 root 密码&#xff0c;进入系统。 2. 在紧急模式下运行&#xff1a;journalctl -xe &#xff0c;查看相关日志&#xff0c;找到关键点&#xff1a; Failed to mount /home 3.接着执行修复命令&#xff1a; xfs_repa…

人工智能技术的应用前景及其对生活和工作方式的影响

人工智能技术的应用前景及其对生活和工作方式的影响 随着人工智能技术的不断发展&#xff0c;我们已经见证了它在各个行业带来的巨大变革。从医疗诊断到企业运营&#xff0c;从日常生活到科技创新&#xff0c;人工智能正以其独特的方式改变着我们的世界。本文将探讨人工智能技…

塑料薄膜厂需要用到哪些自动化备件

塑料薄膜厂在生产过程中&#xff0c;同样会依赖多种自动化备件来确保生产线的稳定运行和高效产出。以下是一些塑料薄膜厂常用的自动化备件&#xff1a; 上料与输送设备&#xff1a; 自动上料机&#xff1a;如塑料颗粒自动上料机、色母分选与称重机等&#xff0c;用于将原料自动…

Jmeter中的后置处理器(一)

后置处理器 1--CSS/JQuery提取器 功能特点 数据提取&#xff1a;使用CSS选择器或JQuery语法从HTML响应中提取特定的数据。动态参数传递&#xff1a;将提取的数据存储为变量&#xff0c;供后续请求使用。支持多种选择器&#xff1a;支持CSS选择器和JQuery语法&#xff0c;提供…

fpga开发-存储器及其应用

目录 ROM RAM FIFO 以结构化方式存储大量二值信息的半导体器件。存储器单元数每个单元的存储位数 掩膜ROM PROM EPROM *E2PROM *快闪存储器 *静态RAM(SRAM) *动态RAM(DRAM)&#xff0c;存储器分为ROM和RAM两种基本类型。ROM分为单口ROM和双口ROM两种类型…

【深圳大学】数据结构A+攻略(计软版)

1. 考试 1.1 形式 分为平时&#xff0c;笔试&#xff0c;机试三部分。其中&#xff1a; 平时占30%&#xff0c;包含平时OJ测验和课堂练习&#xff0c;注意这个可能会因老师的不同和课题组的新策略而改变。笔试占60%&#xff0c;是分值占比的主要部分。机试占10%。 1.2 题型…

MAC上的Office三件套报53错误解决方案(随笔记)

目录 现象原因解决方式1. 可视化2. 命令行 参考链接 现象 最近Mac Mini M4非常热门&#xff0c;我也种草买了一台丐中丐版本来体验一下。 在安装Office三件套后&#xff0c;遇到了一个53的错误&#xff1a; Run-time error 53:File not found: Library/Application Support/A…