開搞：第四個微信小程序：圖上縣志

原因：我換了一個微信號來搞，因為用同一個用戶，備案只能一個個的來。這樣不行。所以我換了一個。原來注冊過小程序。現在修改即可。注意做好計劃后，速度備案和審核，不然你時間浪費不起。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