原因：我换了一个微信号来搞，因为用同一个用户，备案只能一个个的来。这样不行。所以我换了一个。原来注册过小程序。现在修改即可。注意做好计划后，速度备案和审核，不然你时间浪费不起。30元花起。
结构：
+---------------------+
| 前端（腾讯地图+UI） |
+----------+----------+
| 用户点击/交互
+----------v----------+
| 后端（Node.js/Python）|
+----------+----------+
| 调用API聚合数据
+----------v----------+ +-----------------+
| 腾讯地图行政区划API <-----> 获取边界坐标 |
+----------+----------+ +-----------------+
|
+----------v----------+ +-----------------+
| 百度百科/政府数据API <-----> 历史简介与名人 |
+----------+----------+ +-----------------+
|
+----------v----------+ +-----------------+
| 天行数据/新闻API <-----> 热点新闻资讯 |
+---------------------+ +-----------------+一、开发工具准备
小程序开发平台的工具
切换用户，使用新的账号。我扫。扫完等着就行了。
vscode+taro
代码管理 git,最好收工时，再进行吧。
我的主要目的是为了用o3
vscode+taro
打开code
1.找个地方先。我这记忆很差，每次都要查找。我用的是pnpm
(突然想起昨天的两个点，记忆一下：一个是跨页面信息同步（类似于购物车事件），一个是事件冒泡 阻止（页面上边有一层挡着的。）。)
安装及使用 | Taro 文档
Microsoft Windows [版本 10.0.26100.4061]
(c) Microsoft Corporation。保留所有权利。
D:\gitee>pnpm install -g @tarojs/cli
WARN 9 deprecated subdependencies found: @babel/plugin-proposal-object-rest-spread@7.20.7, @humanwhocodes/config-array@0.11.14, @humanwhocodes/object-schema@2.0.3, @swc/register@0.1.10, @types/sass@1.45.0, eslint@8.41.0, glob@7.2.3, inflight@1.0.6, rimraf@3.0.2
Already up to date
Progress: resolved 654, reused 576, downloaded 0, added 0, done
Done in 10.6s using pnpm v10.11.0
D:\gitee>npm info @tarojs/cli
@tarojs/cli@4.1.1 | MIT | deps: 16 | versions: 1016
cli tool for taro
https://github.com/NervJS/taro#readme
keywords: taro, weapp
bin: taro
dist
.tarball: https://registry.npmjs.org/@tarojs/cli/-/cli-4.1.1.tgz
.shasum: 0b031be17d74dde85cd663fcd015d85c9a7585fa
.integrity: sha512-qZhmTglEzU8Vq16qfe7DI0HBrjeiU/iLKyLJuL2j28URks82QwSGCQZaAO4a7cBkF1OchwIPgVBCL9dei0Nhbw==
.unpackedSize: 443.4 kB
dependencies:
@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.0
maintainers:
- yuche <i@yuche.me>
- xuanzebin <492247143@qq.com>
- defaultlee <weitaozsh@gmail.com>
- drchan <798095202@qq.com>
- kyjo <bestkyjo@gmail.com>
- qq592743779 <592743779@qq.com>
- advancedcat <wshx1938@163.com>
- baosiqing <baosiqing@163.com>
- zakary <zakarycode@Gmail.com>
- liuzejia <790868516@qq.com>
- vasily.cjj <chenchiajun@gmail.com>
dist-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.10
published 4 days ago by defaultlee <weitaozsh@gmail.com>
D:\gitee>taro init mapKnowledge
👽 Taro v3.6.37
‼ 获取 taro 全局配置文件失败，不存在全局配置文件：C:\Users\Administrator\.taro-global-config\index.json
Taro 即将创建一个新项目!
Need help? Go and open issue: https://tls.jd.com/taro-issue-helper
? 请输入项目介绍
D:\gitee>pnpm @tarojs/cli init mapKnowledge
ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND No package.json (or package.yaml, or package.json5) was found in "D:\gitee".
D:\gitee>taro -v
👽 Taro v3.6.37
3.6.37意外不？安装的4.1，使用的3.6？反正是新学习，无所谓了。用最新 的。
ok了，继续
D:\gitee>taro init mapKnowledge
👽 Taro v4.1.1
Taro 即将创建一个新项目!
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
> mapKnowledge@1.0.0 dev:weapp D:\gitee\mapKnowledge
> npm run build:weapp -- --watch
> mapKnowledge@1.0.0 build:weapp
> taro build --type weapp --watch👽 Taro v4.1.1
Tips:
1. 预览模式生成的文件较大，设置 NODE_ENV 为 production 可以开启压缩。
Example:
$ set NODE_ENV=production && 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('定位中...');
// 生成高德地图HTML
const generateMapHTML = () => {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高德地图</title>
<style>
html, body, #container {
width: 100%;
height: 90vh;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=${AMapKey}"></script>
</head>
<body>
<div id="container"></div>
<script>
var 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 (
<View>
<WebView src={`data:text/html,${encodeURIComponent(generateMapHTML())}`} />
<View style='height: 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)
- 需要添加域名白名单
今天 就到这时。下班了，明天接着高。
