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

embedded/2024/11/17 15:50:36/

前言

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/embedded/138284.html

相关文章

windows系统开发环境使用docker打包Django程序部署至服务器Ubuntu系统中

正常创建开发Django项目即可&#xff0c;推荐使用虚拟环境开发 &#xff08;virtualenv&#xff09; 在Ubuntu安装docker 在windows系统安装docker 链接 需要启用WSL 2&#xff0c;这个可以在Microsoft store 下载Ubuntu系统 docker默认安装在c盘&#xff0c;会占用很多空间&am…

【ORACLE战报】2024年10月OCP考试战报

原创 厦门微思网络 微思 | 新班预告&#xff1a; 所有的收获都是默默耕耘的成果 2024.10月【最新考试成绩出炉】 来吧&#xff0c;展示 &#xff08;以下为部分学员成绩单&#xff09; &#xff08;部分学员证书&#xff09; 往期考试战报回顾&#xff1a; 【ORACLE战报】…

Rust开发一个命令行工具(一,简单版持续更新)

依赖的包 cargo add clap --features derive clap命令行参数解析 项目目录 代码 main.rs mod utils;use clap::Parser; use utils::{editor::open_in_vscode,fs_tools::{file_exists, get_file, is_dir, list_dir, read_file}, }; /// 在文件中搜索模式并显示包含它的行。…

JMeter初体验:从入门到入门的性能测试之旅

一、关于性能测试 1、性能测试概述 性能测试是一种非功能测试&#xff0c;旨在评估系统在不同负载条件下的性能表现。它包括负载测试、压力测试、稳定性测试和基准测试等。性能测试的目的是确保系统在预期的负载下能够正常运行&#xff0c;并满足用户对响应时间、吞吐量和其他…

新版Apache tomcat服务安装 Mac+Window双环境(笔记)

简介&#xff1a;Tomcat服务器器的下载和安装&#xff1a; 安装前提 1&#xff09;电脑需要有java环境&#xff0c;jdk8以上&#xff0c;否则启动不不成功 2&#xff09;已经安装Sublime⽂文件编辑软件 3&#xff09;window电脑需要显示⽂文件拓拓展名 官网&#xff08;https:…

【安卓恶意软件检测-论文】DroidEvoler:自我进化的 Android 恶意软件检测系统

DroidEvolver&#xff1a;自我进化的 Android 恶意软件检测系统 摘要 鉴于Android框架的频繁变化和Android恶意软件的不断演变&#xff0c;随着时间的推移以有效且可扩展的方式检测恶意软件具有挑战性。为了应对这一挑战&#xff0c;我们提出了DroidEvolver&#xff0c;这是一…

【Qt实现虚拟键盘】

Qt实现虚拟键盘 &#x1f31f;项目分析&#x1f31f;实现方式&#x1f31f;开发流程 &#x1f31f;项目分析 需求&#xff1a;为Linux环境下提供可便捷使用的虚拟键盘OS环境&#xff1a;Windows 7/11、CentOS 7开发语言&#xff1a;Qt/C IDE&#xff1a;QtCreator 、Qt5.14.2功…

HarmonyOS4+NEXT星河版入门与项目实战--------开发工具与环境准备

文章目录 1、熟悉鸿蒙官网1、打开官网2、下载 DevEco Studio3、HarmonyOS 资源库4、开发指南与API 2、安装 DevEco Studio1、软件安装2、配置开发工具 1、熟悉鸿蒙官网 1、打开官网 百度搜索 鸿蒙开发者官网 点击进入开发者官网&#xff0c;点击开发&#xff0c;可以看到各种…