西安有哪些网站建设公司好,网页美工设计图片,关键词优化公司电话,云南网站建设企业推荐原因#xff1a;我换了一个微信号来搞#xff0c;因为用同一个用户#xff0c;备案只能一个个的来。这样不行。所以我换了一个。原来注册过小程序。现在修改即可。注意做好计划后#xff0c;速度备案和审核#xff0c;不然你时间浪费不起。30元花起。
结构#xff1a; -…原因我换了一个微信号来搞因为用同一个用户备案只能一个个的来。这样不行。所以我换了一个。原来注册过小程序。现在修改即可。注意做好计划后速度备案和审核不然你时间浪费不起。30元花起。
结构 ---------------------| 前端腾讯地图UI |--------------------| 用户点击/交互----------v----------| 后端Node.js/Python|--------------------| 调用API聚合数据----------v---------- -----------------| 腾讯地图行政区划API ----- 获取边界坐标 |-------------------- -----------------|----------v---------- -----------------| 百度百科/政府数据API ----- 历史简介与名人 |-------------------- -----------------|----------v---------- -----------------| 天行数据/新闻API ----- 热点新闻资讯 |--------------------- ----------------- 一、开发工具准备
小程序开发平台的工具 切换用户使用新的账号。我扫。扫完等着就行了。
vscodetaro
代码管理 git,最好收工时再进行吧。
我的主要目的是为了用o3
vscodetaro
打开code
1.找个地方先。我这记忆很差每次都要查找。我用的是pnpm
(突然想起昨天的两个点记忆一下一个是跨页面信息同步类似于购物车事件一个是事件冒泡 阻止页面上边有一层挡着的。。)
安装及使用 | Taro 文档
Microsoft Windows [版本 10.0.26100.4061]
(c) Microsoft Corporation。保留所有权利。D:\giteepnpm install -g tarojs/cliWARN 9 deprecated subdependencies found: babel/plugin-proposal-object-rest-spread7.20.7, humanwhocodes/config-array0.11.14, humanwhocodes/object-schema2.0.3, swc/register0.1.10, types/sass1.45.0, eslint8.41.0, glob7.2.3, inflight1.0.6, rimraf3.0.2
Already up to date
Progress: resolved 654, reused 576, downloaded 0, added 0, done
Done in 10.6s using pnpm v10.11.0D:\giteenpm info tarojs/clitarojs/cli4.1.1 | MIT | deps: 16 | versions: 1016
cli tool for taro
https://github.com/NervJS/taro#readmekeywords: taro, weappbin: tarodist
.tarball: https://registry.npmjs.org/tarojs/cli/-/cli-4.1.1.tgz
.shasum: 0b031be17d74dde85cd663fcd015d85c9a7585fa
.integrity: sha512-qZhmTglEzU8Vq16qfe7DI0HBrjeiU/iLKyLJuL2j28URks82QwSGCQZaAO4a7cBkF1OchwIPgVBCL9dei0Nhbw
.unpackedSize: 443.4 kBdependencies:
tarojs/binding: 4.1.1 axios: ^1.6.8 minimist: ^1.2.8
tarojs/helper: 4.1.1 cli-highlight: ^2.1.11 ora: ^5.4.1
tarojs/plugin-doctor: ^0.0.13 download-git-repo: ^3.0.2 semver: ^7.6.0
tarojs/service: 4.1.1 envinfo: ^7.12.0 validate-npm-package-name: ^5.0.0
tarojs/shared: 4.1.1 inquirer: ^8.2.6
adm-zip: ^0.5.12 latest-version: ^5.1.0maintainers:
- yuche iyuche.me
- xuanzebin 492247143qq.com
- defaultlee weitaozshgmail.com
- drchan 798095202qq.com
- kyjo bestkyjogmail.com
- qq592743779 592743779qq.com
- advancedcat wshx1938163.com
- baosiqing baosiqing163.com
- zakary zakarycodeGmail.com
- liuzejia 790868516qq.com
- vasily.cjj chenchiajungmail.comdist-tags:
1.x: 1.3.46 canary: 4.0.7-canary.6 test: 4.0.9-alpha.8
2.x: 2.2.22 experimental: 0.0.0-experimental.2 theta: 3.6.15-theta.0
3.0: 3.0.29 latest: 4.1.1 v3-latest: 3.6.37
alpha: 4.1.1-alpha.2 next: 4.0.2
beta: 4.0.10-beta.4 nightly: 3.6.24-nightly.10published 4 days ago by defaultlee weitaozshgmail.comD:\giteetaro init mapKnowledgeTaro v3.6.37‼ 获取 taro 全局配置文件失败不存在全局配置文件C:\Users\Administrator\.taro-global-config\index.jsonTaro 即将创建一个新项目!
Need help? Go and open issue: https://tls.jd.com/taro-issue-helper? 请输入项目介绍
D:\giteepnpm tarojs/cli init mapKnowledgeERR_PNPM_NO_IMPORTER_MANIFEST_FOUND No package.json (or package.yaml, or package.json5) was found in D:\gitee.D:\giteetaro -vTaro v3.6.373.6.37 意外不安装的4.1使用的3.6反正是新学习无所谓了。用最新 的。 ok了继续 D:\giteetaro init mapKnowledgeTaro v4.1.1Taro 即将创建一个新项目!
Need help? Go and open issue: https://tls.jd.com/taro-issue-helper? 请输入项目介绍 点击地图就可以得到该区域的相关知识。
? 请选择框架 React
? 是否需要使用 TypeScript Yes
? 是否需要编译为 ES5 No
? 请选择 CSS 预处理器Sass/Less/Stylus Sass
? 请选择包管理工具 pnpm
? 请选择编译工具 Webpack5
? 请选择模板源 Gitee最快
√ 拉取远程模板仓库成功
? 请选择模板 默认模板
好了用codea打开这个文件夹进入下一步的操作。
注意使用一个有额度的账号。
进入开始初始化吧。pnpm install 上图中的命令是最常用的。要记住。开发过程中用第一个命令动态编译。结束时用第二个命令加上 -production。。上面有说明。
pnpm install 速度感人下午接着。好吧到下午了。
接着。 pnpm dev dev:weapp (base) PS D:\gitee\mapKnowledge pnpm dev:weapp mapKnowledge1.0.0 dev:weapp D:\gitee\mapKnowledge npm run build:weapp -- --watch mapKnowledge1.0.0 build:weapp taro build --type weapp --watch Taro v4.1.1 Tips: 1. 预览模式生成的文件较大设置 NODE_ENV 为 production 可以开启压缩。 Example: $ set NODE_ENVproduction taro build --type weapp --watch 2. 建议开启持久化缓存功能能有效提升二次编译速度详情请参考: https://docs.taro.zone/docs/config-detail#cache。 提示 appid touristappid 生成 工具配置 D:\gitee\mapKnowledge\dist/project.config.json 启动 开发者工具-项目目录 D:\gitee\mapKnowledge\dist 再接着打开微信开发者工具找到对应的文件夹下的dist文件夹。
修改一上看结果 OK了
下边正式开工
二、腾讯地图相关
1.注册一个账号最好用一个个体户的信息来提升下额度否则只能测试
腾讯位置服务 - 立足生态连接未来 2.创建一个新的应用
在这时我就不创建了共用原来的。 服务提示 WebService API | 腾讯位置服务
设置白名单 发现了几个有意思的调用 。
天气WebService API | 腾讯位置服务
POiWebService API | 腾讯位置服务
我的是高亮需求看我找到了什么》 好吧最好的高德。我就用一下吧反正这是一个知识应用。
打开高德地图开放平台注册登录支付宝认证OK。 高德地图的免费用量高德控制台
1.1配置文件存放高德的key 1.2组件文件
import React, { useState, useEffect } from react;
import { View } from tarojs/components;
import { WebView } from tarojs/components;
import Taro from tarojs/taro;
import { AMapKey } from ../config/amapConfig;const AMapComponent: React.FC () {const [location, setLocation] useState({latitude: 35.04,longitude: 118.65});const [address, setAddress] useState(定位中...);// 生成高德地图HTMLconst generateMapHTML () {return !DOCTYPE htmlhtmlheadmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1.0title高德地图/titlestylehtml, body, #container { width: 100%; height: 90vh; margin: 0;padding: 0;}/stylescript typetext/javascript srchttps://webapi.amap.com/maps?v2.0key${AMapKey}/script/headbodydiv idcontainer/divscriptvar map new AMap.Map(container, {zoom: 14,center: [${location.longitude}, ${location.latitude}]});// 添加定位控件map.plugin(AMap.Geolocation, function() {var geolocation new AMap.Geolocation({enableHighAccuracy: true,timeout: 10000,buttonOffset: new AMap.Pixel(10, 20),zoomToAccuracy: true,showButton: true});map.addControl(geolocation);geolocation.getCurrentPosition();});/script/body/html;};useEffect(() {// 获取位置信息Taro.getLocation({type: gcj02,success: async function (res) {setLocation({latitude: res.latitude,longitude: res.longitude});// 通过高德地图API获取地址信息try {const response await Taro.request({url: https://restapi.amap.com/v3/geocode/regeo,data: {key: AMapKey,location: ${res.longitude},${res.latitude},extensions: base}});if (response.data.status 1 response.data.regeocode) {const { province, city, district } response.data.regeocode.addressComponent;setAddress(${province} ${city} ${district});}} catch (error) {console.error(获取地址失败:, error);setAddress(获取地址失败);}},fail: function() {Taro.showToast({title: 定位失败,icon: none});}});}, []);return (ViewWebView src{data:text/html,${encodeURIComponent(generateMapHTML())}} /View styleheight: 10vh; display: flex; align-items: center; justify-content: center; background: #fff;{address}/View/View);
};export default AMapComponent; 新建一个key,将key和密钥放在配置上。 高德开放平台配置 确保您的 Key 是 Web 服务 (JS API) 的 Key需要配置安全密钥 (jscode)需要添加域名白名单 今天 就到这时。下班了明天接着高。
不知什么位置出错了。高德地图可以得到经纬但地图不显示。
又换回腾讯地图了啥都不如原生的。
import React, { useState, useEffect } from react;
import { View, Map } from tarojs/components;
import Taro from tarojs/taro;
import { WeChatKey } from ../config/amapConfig;const AMapComponent: React.FC () {const defaultLocation {latitude: 35.04,longitude: 118.65,address: 山东省临沂市临沭县};const [location, setLocation] useState({latitude: defaultLocation.latitude,longitude: defaultLocation.longitude});const [address, setAddress] useState(定位中...);// 使用腾讯地图API解析地址const getAddressFromLocation async (latitude: number, longitude: number) {try {const response await Taro.request({url: https://apis.map.qq.com/ws/geocoder/v1/,data: {key: WeChatKey,location: ${latitude},${longitude},get_poi: 0}});if (response.data.status 0) {const { province, city, district } response.data.result.address_component;return ${province} ${city} ${district};}throw new Error(解析地址失败);} catch (error) {console.error(获取地址信息失败:, error);return defaultLocation.address;}};useEffect(() {const timeoutId setTimeout(() {if (address 定位中...) {setLocation({latitude: defaultLocation.latitude,longitude: defaultLocation.longitude});setAddress(defaultLocation.address);Taro.showToast({title: 定位超时显示默认位置,icon: none});}}, 10000);// 使用小程序原生定位APITaro.getLocation({type: gcj02,isHighAccuracy: true,success: async (res) {clearTimeout(timeoutId);const { latitude, longitude } res;setLocation({ latitude, longitude });// 使用腾讯地图API解析地址const addressInfo await getAddressFromLocation(latitude, longitude);setAddress(addressInfo);},fail: () {clearTimeout(timeoutId);setLocation({latitude: defaultLocation.latitude,longitude: defaultLocation.longitude});setAddress(defaultLocation.address);Taro.showToast({title: 定位失败显示默认位置,icon: none});}});return () clearTimeout(timeoutId);}, []);// 地图点击事件处理const handleMapTap async (e) {const { latitude, longitude } e.detail;setLocation({ latitude, longitude });const addressInfo await getAddressFromLocation(latitude, longitude);setAddress(addressInfo);};return (View classNamemap-containerMapclassNamemapstyle{{ width: 100%, height: 90vh }}latitude{location.latitude}longitude{location.longitude}scale{14}showLocationenableOverlookingenableZoomenableScrollonTap{handleMapTap}/View classNameaddress-bar{address}/View/View);
};export default AMapComponent;
修改进行扩展吧。 import Taro from tarojs/taro;
import { WeChatKey } from ../config/amapConfig;
import { Location, AddressInfo } from ../types/map;export class LocationService {static async getAddress(location: Location): PromiseAddressInfo {try {const response await Taro.request({url: https://apis.map.qq.com/ws/geocoder/v1/,data: {key: WeChatKey,location: ${location.latitude},${location.longitude},get_poi: 0}});if (response.data.status 0) {const { address_component, formatted_addresses } response.data.result;return {province: address_component.province,city: address_component.city,district: address_component.district,formatted: formatted_addresses.standard_address};}throw new Error(解析地址失败);} catch (error) {console.error(获取地址信息失败:, error);throw error;}}static async getDistrictBoundary(districtName: string): PromiseDistrictBoundary {try {const response await Taro.request({url: https://apis.map.qq.com/ws/district/v1/search,data: {key: WeChatKey,keyword: districtName}});if (response.data.status 0 response.data.result.length 0) {return {points: response.data.result[0].location,name: districtName};}throw new Error(获取区域边界失败);} catch (error) {console.error(获取区域边界失败:, error);throw error;}}
} 对于获取区域边界我们需要使用腾讯位置服务的行政区划接口。 请按以下步骤操作 登录腾讯位置服务平台 (https://lbs.qq.com/)进入控制台 - 应用管理 - 选择您的应用在密钥管理中确认您的 key 已启用在设置 - WebServiceAPI 中开通以下接口 行政区划地址解析逆地址解析 同时您可能还需要开通以下接口权限 行政区划相关接口 /ws/district/v1/list/ws/district/v1/getchildren/ws/district/v1/search 喵了喵。您看绘制的这破图。 唉不行需要其他方法 。得了天地图 服务中心下载了
然后用这个数据吧。9.5M。喵了个喵。测试用后期得改成库。
上传到阿里oss
看到了数据结构都不一样。好不好搞了一个下午。可以绘制边线。
可以弹窗显示。 加上天气。但 我不知下一步如何走。休息一会。
