From bdb9ab10a92cc488b636742235f95988c535c605 Mon Sep 17 00:00:00 2001 From: Bruce <850611576@qq.com> Date: Thu, 4 May 2023 20:39:16 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E7=BD=91=E7=AB=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/resources/navigation/data.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/docs/resources/navigation/data.js b/docs/resources/navigation/data.js index 5584a53..4c1d585 100644 --- a/docs/resources/navigation/data.js +++ b/docs/resources/navigation/data.js @@ -298,6 +298,23 @@ export default [ }, ] }, + { + title: '小程序', + items: [ + { + icon: 'https://storage.360buyimg.com/pubfree-bucket/taro-docs/c07c6984de/img/logo-taro.png', + title: 'Taro', + desc: '开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝小程序/H5等应用', + link: 'https://taro-docs.jd.com/docs/' + }, + { + icon: 'https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico', + title: '微信官方文档-小程序', + desc: '微信小程序官方文档', + link: 'https://developers.weixin.qq.com/miniprogram/dev/framework/' + }, + ] + }, { title: '可视化', items: [ -- Gitee From c6dacc9135020c191f86cd0cfd18163468537a74 Mon Sep 17 00:00:00 2001 From: Bruce <850611576@qq.com> Date: Fri, 5 May 2023 21:45:04 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=E5=BC=80=E5=8F=91=E6=96=87=E7=AB=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/nav.js | 6 ++ docs/work/maps/wx_map.md | 196 +++++++++++++++++++++++++++++++++++++++ docs/work/sidebar.js | 9 +- 3 files changed, 210 insertions(+), 1 deletion(-) create mode 100644 docs/work/maps/wx_map.md diff --git a/docs/.vitepress/nav.js b/docs/.vitepress/nav.js index eb30431..e024c63 100644 --- a/docs/.vitepress/nav.js +++ b/docs/.vitepress/nav.js @@ -57,6 +57,12 @@ export default [ items: [ { text: 'Antd 虐我千百遍', link: '/work/antd' }, { text: '第三方工具', link: '/work/tools' }, + { + text: '地图开发', + items: [ + { text: '微信小程序地图开发', link: '/work/maps/wx_map' }, + ] + }, ] }, ] \ No newline at end of file diff --git a/docs/work/maps/wx_map.md b/docs/work/maps/wx_map.md new file mode 100644 index 0000000..4ad0332 --- /dev/null +++ b/docs/work/maps/wx_map.md @@ -0,0 +1,196 @@ +## 前言 + +最近接了个跟微信小程序地图有关的开发任务，第一次在小程序上开发地图，既兴奋又忐忑。还好，虽然小程序地图的 API 功能有些少，但是基本的需求都能覆盖到。 + +在这里，对微信小程序地图开发的基本功能进行总结归纳。官方文档对地图属性、方法的归纳比较到位，但缺乏示例代码，第一次搞还是有点迷糊的。网上的文章又写得七零八落，没见到有人专门总结归纳。 + +本人使用 **React + Taro** 开发的微信小程序，因此使用的是 Taro 提供的地图 API，但是和微信官方的是一样的，Taro 不过是二次封装而已。 + +相关链接： + +[Taro Map 组件](https://taro-docs.jd.com/docs/components/maps/map){link=card} +[Taro Map 实例方法](https://taro-docs.jd.com/docs/apis/media/map/MapContext){link=card} +[微信官方文档 map](https://developers.weixin.qq.com/miniprogram/dev/component/map.html){link=card} + +## 创建地图 + +引入 `Map` 组件，再像普通组件使用即可。可以添加很多属性，各个属性的作用详见 [Taro 文档](https://taro-docs.jd.com/docs/components/maps/map)。 + +```js +import { Map } from '@tarojs/components' + +class TaroMap extends Component { + render() { + return + } +} +``` + +## 在地图画标记点 + +通过设置 `Map` 组件的 `markers` 属性，在地图上设置标记点。 + +标记点一般都需要设置这几个属性： + +- `id`：设置标记点的 id +- `longitude`：设置标记点经度 +- `latitude`：设置标记点纬度 +- `iconPath`：设置标记点图标 +- `width`：设置宽度 +- `height`：设置高度 + +```js +import { Map } from '@tarojs/components' +import markerImg from './example.svg' + +class TaroMap extends Component { + markers = [ + { + id: 0, + iconPath: markerImg, + longitude: 100, + latitude: 20, + width: 50, + height: 50, + }, + { + id: 1, + iconPath: markerImg, + longitude: 100, + latitude: 20, + width: 50, + height: 50, + }, + ] + + render() { + return + } +} +``` + +## 在地图画圆圈 + +通过设置 `Map` 组件的 `circles` 属性，在地图上画圈。 + +圆圈一般都需要设置这几个属性： + +- `longitude`：设置圆圈中心经度 +- `latitude`：设置圆圈中心纬度 +- `color`：设置圆圈边缘颜色 +- `fillColor`：设置圆圈填充颜色 +- `radius`：设置圆圈半径，单位是米，这里是实际的半径大小 + +```js +import { Map } from '@tarojs/components' + +class TaroMap extends Component { + circles = [ + { + longitude: 100, + latitude: 20, + color: '#30BC6B', + fillColor: 'blue', + radius: 500, + }, + ] + + render() { + return + } +} +``` + +## 初始化地图中心为当前位置，并画圈 + +大部分地图都会在进入页面时把中心移动到当前位置，同时会以当前位置为中心画一个圆圈。 + +该需求主要利用 [`getLocation()`](https://taro-docs.jd.com/docs/apis/location/getLocation) 方法来实现，`getLocation()` 方法可以获取当前的地理位置、速度等信息。 + +```js +import { Map } from '@tarojs/components' + +class TaroMap extends Component { + state = { + longitude: 100, + latitude: 90, + circles: [], + } + + componentDidMount() { + this.getCurrentLocation() + } + + getCurrentLocation = async () => { + const res = await Taro.getLocation({ type: 'gcj02' }) + const { longitude, latitude } = res + this.setState({ + longitude, + latitude, + circles: [ + { + longitude, + latitude, + color: 'red', + fillColor: 'green', + radius: 500, + }, + ], + }) + } + + render() { + const { longitude, latitude } = this.state + + return + } +} +``` + +## 始终固定图标在地图中心 + +平时常见的地图，往往都会有一个图标固定在地图的中心，并且无论如何拖动地图，位置都始终不变。 + +在旧版的微信小程序地图中，这个功能需要使用 `control` 控件实现，但官方已经明确说明即将废弃该方式。后来又通过利用视图容器 `cover-view` 来实现，但是 2023 年的现在连 `cover-view` 也不需要了，直接使用普通的 `view` 容器组件即可。 + +这样一来，就是很普通的设置元素水平垂直居中的问题了。 + +:::tip 官方说明 +目前原生组件均已支持同层渲染，建议使用 view 替代 +::: + +```js +import { Map, View, Image } from '@tarojs/components' + +class TaroMap extends Component { + render() { + return ( + + + + + + ) + } +} +``` + +```scss +.map { + width: 100vw; + height: 100vh; + position: relative; +} + +.center { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.center--image { + width: 70px; + height: 70px; +} +``` diff --git a/docs/work/sidebar.js b/docs/work/sidebar.js index 1f57603..697b9c5 100644 --- a/docs/work/sidebar.js +++ b/docs/work/sidebar.js @@ -6,5 +6,12 @@ export default [ { text: '那些年, Antd 坑我的地方', link: '/work/antd' }, { text: '第三方工具', link: '/work/tools' }, ] - } + }, + { + text: '地图开发', + collapsed: true, + items: [ + { text: '微信小程序地图开发教程', link: '/work/maps/wx_map' }, + ] + }, ] \ No newline at end of file -- Gitee From 469eaef329a1530985bcd58a717695cdec958935 Mon Sep 17 00:00:00 2001 From: Bruce <850611576@qq.com> Date: Sun, 7 May 2023 21:00:25 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E5=B0=8F=E7=A8=8B=E5=BA=8F?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=BC=80=E5=8F=91=E5=89=A9=E4=BD=99=E5=86=85?= =?UTF-8?q?=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/work/maps/wx_map.md | 56 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/docs/work/maps/wx_map.md b/docs/work/maps/wx_map.md index 4ad0332..fceea65 100644 --- a/docs/work/maps/wx_map.md +++ b/docs/work/maps/wx_map.md @@ -194,3 +194,59 @@ class TaroMap extends Component { height: 70px; } ``` + +## 返回当前位置 + +点击返回图标，让地图回到当前位置，几乎是每个地图都必备的功能。而这个功能实现起来其实非常简单。 + +首先调用 `createMapContext()` 创建一个地图实例对象，再调用地图实例的 `moveToLocation()` 方法将地图中心移动到当前定位点即可。 + +```js +handleBackCurrenLocation = () => { + // 需要把地图的id传入 + const wxMap = Taro.createMapContext(mapId) + wxMap.moveToLocation({}) +} +``` + +## 地图拖动展示不同的标记点 + +由于地图上的标记点可能会非常多，所以一般都不会一口气把所有的点都画到地图上，而是展示地图中心某个范围之内的点。 + +拖动地图，再展示新的地图中心附近的标记点。 + +该功能的实现需要用到 `onRegionChange` 事件，当地图视野发生变化时会触发该事件，也就是拖动地图。像这种频繁触发的事件，最好防抖。 + +```js +import _ from 'lodash' + +class TaroMap extends Component { + // 防抖500毫秒 + onRegionChange = _.debounce(async (e) => { + const { type, detail } = e; + // 拖动地图会触发两次onRegionChange事件，我们只需要拖动结束时的事件 + if (type === 'end') { + const { centerLocation: { longitude, latitude } } = detail; + // ...获取新的标记点 + const markers = []; + this.setState({ markers }); + } + } + }, 500) + + render() { + + + + + + } +} +``` -- Gitee