开搞：第四个微信小程序：图上县志

原因：我换了一个微信号来搞，因为用同一个用户，备案只能一个个的来。这样不行。所以我换了一个。原来注册过小程序。现在修改即可。注意做好计划后，速度备案和审核，不然你时间浪费不起。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/cliWARN  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.0D:\gitee>npm info @tarojs/cli@tarojs/cli@4.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 <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.10published 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.jsonTaro 即将创建一个新项目!
Need help? Go and open issue: https://tls.jd.com/taro-issue-helper? 请输入项目介绍
D:\gitee>pnpm @tarojs/cli init mapKnowledgeERR_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.373.6.37

意外不？安装的4.1，使用的3.6？反正是新学习，无所谓了。用最新的。

ok了，继续

D:\gitee>taro init mapKnowledge
👽 Taro 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

> 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('定位中...');// 生成高德地图HTMLconst 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)
- 需要添加域名白名单

今天就到这时。下班了，明天接着高。

不知什么位置出错了。高德地图可以得到经纬，但地图不显示。

又换回腾讯地图了，啥都不如原生的。

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 className='map-container'><MapclassName='map'style={{ width: '100%', height: '90vh' }}latitude={location.latitude}longitude={location.longitude}scale={14}showLocationenableOverlookingenableZoomenableScrollonTap={handleMapTap}/><View className='address-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): Promise<AddressInfo> {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): Promise<DistrictBoundary> {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