微信小程序开发学习之--地图绘制行政区域图

不知道大家有没有感觉就是在做微信小程序地图功能时刚刚接触时候真的感觉好迷茫呀，文档看不懂，资料找不到，就很难受呀，比如我现在的功能就想想绘制出一个区域的轮廓图，主要是为了显眼，效果图如下：就是绘画出北京的轮廓图，蛋黄酥一样的这块。说清楚了我功能之后就开始说怎么实现了（源码码估计会放在程序的最后一段）。

开发思路

1.首先查看官方文档（点进去看就可以了好多配置，不一一细说）

微信小程序地图开发文档

2.看了官方文档后我还是不知道怎么弄，但是我确定用“polygon”这个东西来绘画出轮廓，这个参数大概的意思就是指定一系列坐标点，根据 points 坐标数据生成闭合多边形，我理解的意思就是你要用很多点，用点成线的形式在地图上描点。出线。

3.知道怎么绘画出轮廓之后，又迷茫了我怎么才能得到点，百度很久后有个大神给出方案

数据可视化平台 点进去看到自己想要的城市，导出点，把点加工下，得到轮廓数据，比如我是用的北京的\后期贴代码上来，直接看就ok。

4.有数据 后就开始写代码，直接上代码 (源码地址就在下一行)微信小程序绘制行政区轮廓图小程序: 用微信小程序内部的map来绘制行政区轮廓范围

（1）html 代码，很简单没啥子东西，就配置配置参数，不懂的话就去看官方文档

<map id="mapId"class="map"latitude="{{latitude}}"longitude="{{longitude}}"bindmarkertap="onMarkerTap"bindcallouttap="onCalloutTap"bindlabeltap="onLabelTap"scale='7.5'polygons="{{polygon}}"
></map><view class="btn-area service"><button bindtap="removeMarkers">移除参与聚合点的marker</button><button bindtap="addMarkers">添加聚合点marker</button>
</view>

（2）css代码

.map {width: 100%;height: 300px;
}.btn-area {margin: 10px;display: flex;flex-wrap: wrap;border: 1px solid #ccc;
}button {display: inline-block;margin: 10px 5px;
}

（3）js代码这块比较重要呀（给自己看，太简单了哈哈哈哈哈哈哈哈哈，不过我就想一个人自娱自乐）

const app = getApp()
const img = '../image/location.png'Page({data: {//中心经度	latitude: 40.2,//中心纬度	longitude: 116.324520,//polygons 多边形polygon:[{  points: [{longitude:116.6212, latitude:41.0283},{longitude:116.6157, latitude:41.053},{longitude:116.6309, latitude:41.0608},{longitude:116.6896, latitude:41.0445},{longitude:116.6988, latitude:41.0208},{longitude:116.6777, latitude:40.9715},{longitude:116.7224, latitude:40.9273},{longitude:116.7134, latitude:40.9103},{longitude:116.7796, latitude:40.8771},{longitude:116.8047, latitude:40.8409},{longitude:116.8207, latitude:40.8483},{longitude:116.8762, latitude:40.8212},{longitude:116.8925, latitude:40.7803},{longitude:116.9251, latitude:40.7729},{longitude:116.9266, latitude:40.7449},{longitude:116.9696, latitude:40.7064},{longitude:117.0311, latitude:40.6921},{longitude:117.1107, latitude:40.7082},{longitude:117.2071, latitude:40.695},{longitude:117.3179, latitude:40.6578},{longitude:117.4092, latitude:40.6873},{longitude:117.5143, latitude:40.6611},{longitude:117.5004, latitude:40.6362},{longitude:117.462, latitude:40.6531},{longitude:117.4489, latitude:40.6515},{longitude:117.4482, latitude:40.6278},{longitude:117.4212, latitude:40.6354},{longitude:117.4218, latitude:40.5694},{longitude:117.3877, latitude:40.5608},{longitude:117.3502, latitude:40.5822},{longitude:117.3118, latitude:40.578},{longitude:117.2495, latitude:40.5482},{longitude:117.2629, latitude:40.513},{longitude:117.2187, latitude:40.5143},{longitude:117.2085, latitude:40.5009},{longitude:117.2354, latitude:40.4575},{longitude:117.2641, latitude:40.4415},{longitude:117.2341, latitude:40.4172},{longitude:117.2407, latitude:40.3944},{longitude:117.2243, latitude:40.3709},{longitude:117.2428, latitude:40.3698},{longitude:117.2749, latitude:40.3326},{longitude:117.2955, latitude:40.2782},{longitude:117.3317, latitude:40.2897},{longitude:117.3455, latitude:40.2349},{longitude:117.39, latitude:40.228},{longitude:117.3784, latitude:40.2103},{longitude:117.3933, latitude:40.2036},{longitude:117.3805, latitude:40.1963},{longitude:117.4069, latitude:40.1858},{longitude:117.3517, latitude:40.1732},{longitude:117.3606, latitude:40.157},{longitude:117.3473, latitude:40.1356},{longitude:117.3117, latitude:40.1394},{longitude:117.2744, latitude:40.1058},{longitude:117.2493, latitude:40.1165},{longitude:117.2112, latitude:40.0966},{longitude:117.1992, latitude:40.0673},{longitude:117.1855, latitude:40.085},{longitude:117.1803, latitude:40.0695},{longitude:117.1564, latitude:40.0787},{longitude:117.1392, latitude:40.0641},{longitude:117.0856, latitude:40.0751},{longitude:117.0218, latitude:40.0296},{longitude:116.9304, latitude:40.0553},{longitude:116.8707, latitude:40.0411},{longitude:116.8502, latitude:40.055},{longitude:116.8227, latitude:40.0465},{longitude:116.82, latitude:40.0283},{longitude:116.7778, latitude:40.0324},{longitude:116.7572, latitude:39.9633},{longitude:116.7826, latitude:39.9476},{longitude:116.7871, latitude:39.8868},{longitude:116.8041, latitude:39.8779},{longitude:116.8123, latitude:39.8897},{longitude:116.9002, latitude:39.8316},{longitude:116.9028, latitude:39.8483},{longitude:116.9174, latitude:39.8469},{longitude:116.9363, latitude:39.7951},{longitude:116.9536, latitude:39.7876},{longitude:116.8995, latitude:39.7587},{longitude:116.9167, latitude:39.7314},{longitude:116.8828, latitude:39.7186},{longitude:116.9065, latitude:39.6776},{longitude:116.8499, latitude:39.6676},{longitude:116.8512, latitude:39.6523},{longitude:116.8269, latitude:39.6382},{longitude:116.8354, latitude:39.617},{longitude:116.79, latitude:39.6105},{longitude:116.7851, latitude:39.5935},{longitude:116.7254, latitude:39.6242},{longitude:116.7006, latitude:39.621},{longitude:116.7263, latitude:39.5978},{longitude:116.7106, latitude:39.588},{longitude:116.694, latitude:39.6017},{longitude:116.6205, latitude:39.6017},{longitude:116.6079, latitude:39.6247},{longitude:116.5659, latitude:39.6198},{longitude:116.5623, latitude:39.6017},{longitude:116.5244, latitude:39.5965},{longitude:116.5274, latitude:39.5732},{longitude:116.5085, latitude:39.5511},{longitude:116.4709, latitude:39.5546},{longitude:116.4772, latitude:39.5344},{longitude:116.4368, latitude:39.5264},{longitude:116.4438, latitude:39.5099},{longitude:116.4017, latitude:39.528},{longitude:116.4229, latitude:39.4966},{longitude:116.4125, latitude:39.4817},{longitude:116.4441, latitude:39.4822},{longitude:116.4561, latitude:39.4589},{longitude:116.4344, latitude:39.4428},{longitude:116.3367, latitude:39.4561},{longitude:116.3056, latitude:39.4895},{longitude:116.2579, latitude:39.5005},{longitude:116.2462, latitude:39.5572},{longitude:116.204, latitude:39.5888},{longitude:116.1541, latitude:39.586},{longitude:116.1304, latitude:39.5677},{longitude:116.1014, latitude:39.5801},{longitude:116.0353, latitude:39.5718},{longitude:116.0164, latitude:39.5881},{longitude:115.9952, latitude:39.5771},{longitude:115.9784, latitude:39.5957},{longitude:115.9793, latitude:39.5724},{longitude:115.9575, latitude:39.5609},{longitude:115.9102, latitude:39.6008},{longitude:115.9117, latitude:39.5695},{longitude:115.8904, latitude:39.5686},{longitude:115.8877, latitude:39.5507},{longitude:115.8555, latitude:39.555},{longitude:115.8192, latitude:39.5308},{longitude:115.8287, latitude:39.507},{longitude:115.7521, latitude:39.5117},{longitude:115.7385, latitude:39.5463},{longitude:115.6921, latitude:39.5658},{longitude:115.6893, latitude:39.599},{longitude:115.6672, latitude:39.6156},{longitude:115.6573, latitude:39.6001},{longitude:115.5799, latitude:39.5895},{longitude:115.5452, latitude:39.6186},{longitude:115.5145, latitude:39.5918},{longitude:115.5224, latitude:39.64},{longitude:115.4782, latitude:39.6523},{longitude:115.5001, latitude:39.6909},{longitude:115.4924, latitude:39.7387},{longitude:115.4399, latitude:39.7521},{longitude:115.4249, latitude:39.7745},{longitude:115.4832, latitude:39.7987},{longitude:115.5071, latitude:39.7837},{longitude:115.5522, latitude:39.7947},{longitude:115.5693, latitude:39.8138},{longitude:115.5143, latitude:39.8377},{longitude:115.5292, latitude:39.8755},{longitude:115.509, latitude:39.8842},{longitude:115.5205, latitude:39.9022},{longitude:115.4807, latitude:39.9358},{longitude:115.4262, latitude:39.9504},{longitude:115.4545, latitude:40.0297},{longitude:115.5522, latitude:40.0792},{longitude:115.5576, latitude:40.0951},{longitude:115.5907, latitude:40.0964},{longitude:115.5991, latitude:40.12},{longitude:115.7411, latitude:40.1322},{longitude:115.777, latitude:40.1776},{longitude:115.8066, latitude:40.1533},{longitude:115.8519, latitude:40.148},{longitude:115.8481, latitude:40.184},{longitude:115.8721, latitude:40.1872},{longitude:115.8981, latitude:40.2364},{longitude:115.9689, latitude:40.2639},{longitude:115.9228, latitude:40.3247},{longitude:115.9183, latitude:40.3539},{longitude:115.8593, latitude:40.3624},{longitude:115.8604, latitude:40.3757},{longitude:115.7708, latitude:40.4426},{longitude:115.7822, latitude:40.4921},{longitude:115.736, latitude:40.5038},{longitude:115.7532, latitude:40.5388},{longitude:115.7906, latitude:40.5609},{longitude:115.8198, latitude:40.5593},{longitude:115.8277, latitude:40.5873},{longitude:115.8854, latitude:40.5952},{longitude:115.9078, latitude:40.6173},{longitude:115.9668, latitude:40.6063},{longitude:115.9834, latitude:40.5788},{longitude:116.0256, latitude:40.6067},{longitude:116.03, latitude:40.5974},{longitude:116.1217, latitude:40.6292},{longitude:116.1106, latitude:40.6469},{longitude:116.1349, latitude:40.6671},{longitude:116.1646, latitude:40.6634},{longitude:116.1779, latitude:40.7079},{longitude:116.2338, latitude:40.7591},{longitude:116.2476, latitude:40.7918},{longitude:116.2734, latitude:40.7629},{longitude:116.3089, latitude:40.7519},{longitude:116.3295, latitude:40.7738},{longitude:116.4617, latitude:40.7698},{longitude:116.4572, latitude:40.7983},{longitude:116.3344, latitude:40.9046},{longitude:116.3342, latitude:40.9213},{longitude:116.3703, latitude:40.9437},{longitude:116.3985, latitude:40.906},{longitude:116.4742, latitude:40.8961},{longitude:116.4475, latitude:40.9538},{longitude:116.4562, latitude:40.9813},{longitude:116.5163, latitude:40.9752},{longitude:116.5633, latitude:40.9936},{longitude:116.5988, latitude:40.9747},{longitude:116.6145, latitude:40.9833},{longitude:116.6212, latitude:41.0283}],fillColor: "#4F94CD33",fillColor: "#ffff0033",strokeColor: "#FFF",strokeWidth: 2,zIndex: 5,}]	},onLoad: function () {this.mapCtx = wx.createMapContext('mapId')this.setData({polygon: this.data.polygon,});},
})

get

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/16901.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【入门SpringCloud（一）】什么是SpringCloud？

【入门SpringCloud（一）】什么是SpringCloud？

一、概述 集群&#xff08;Cluster&#xff09;&#xff1a;同一种软件服务的多个服务节点共同为系统提供服务过程&#xff0c;称之为该软件服务集群。 分布式&#xff08;Distribute&#xff09;&#xff1a;分布式是一种系统架构&#xff0c;是将系统中的不同组件分布在不同…
阅读更多...
Mac 安装配置adb命令环境（详细步骤）

Mac 安装配置adb命令环境（详细步骤）

一、注意&#xff1a;前提要安装java环境。 因为android sdk里边开发的一些包都是依赖java语言的&#xff0c;所以&#xff0c;首先要确保已经配置了java环境。 二、在Mac下配置android adb命令环境&#xff0c;配置方式如下&#xff1a; 1、下载并安装IDE &#xff08;andr…
阅读更多...
LLaMA系列 | LLaMA和LLaMA-2精简总结

LLaMA系列 | LLaMA和LLaMA-2精简总结

文章目录 1、LLaMA1.1、模型结构1.2、训练方式1.3、结论 2、LLaMA-22.1、相比LLaMA1的升级2.3、模型结构2.3.1、MHA, MQA, GQA区别与联系 2.4、训练方式 1、LLaMA &#x1f525; 纯基座语言模型 《LLaMA: Open and Efficient Foundation Language Models》&#xff1a;https:/…
阅读更多...
Unity3d C#快速打开萤石云监控视频流（ezopen）支持WebGL平台，替代UMP播放视频流的方案（含源码）

Unity3d C#快速打开萤石云监控视频流（ezopen）支持WebGL平台，替代UMP播放视频流的方案（含源码）

前言 Universal Media Player算是视频流播放功能常用的插件了&#xff0c;用到现在已经不知道躺了多少坑了&#xff0c;这个插件虽然是白嫖的&#xff0c;不过被甲方和领导吐槽的就是播放视频流的速度特别慢&#xff0c;可能需要几十秒来打开监控画面&#xff0c;等待的时间较…
阅读更多...
Spring学习笔记之spring概述

Spring学习笔记之spring概述

文章目录 Spring介绍Spring8大模块Spring特点 Spring介绍 Spring是一个轻量级的控制反转和面向切面的容器框架 Spring最初的出现是为了解决EJB臃肿的设计&#xff0c;以及难以测试等问题。 Spring为了简化开发而生&#xff0c;让程序员只需关注核心业务的实现&#xff0c;尽…
阅读更多...
HTML+CSS+JavaScript：轮播图的自动播放、手动播放、鼠标悬停暂停播放

HTML+CSS+JavaScript：轮播图的自动播放、手动播放、鼠标悬停暂停播放

一、需求 昨天我们做了轮播图的自动播放&#xff0c;即每隔一秒自动切换一次 今天我们增加两个需求&#xff1a; 1、鼠标点击向右按钮&#xff0c;轮播图往后切换一次&#xff1b;鼠标点击向左按钮&#xff0c;轮播图往前切换一次 2、鼠标悬停在轮播图区域中时&#xff0c;…
阅读更多...
Verilog语法学习——LV5_位拆分与运算

Verilog语法学习——LV5_位拆分与运算

LV5_位拆分与运算 题目来源于牛客网 [牛客网在线编程_Verilog篇_Verilog快速入门 (nowcoder.com)](https://www.nowcoder.com/exam/oj?page1&tabVerilog篇&topicId301) 题目 题目描述&#xff1a; 现在输入了一个压缩的16位数据&#xff0c;其实际上包含了四个数据…
阅读更多...
从互联网到云时代，Apache RocketMQ 是如何演进的？

从互联网到云时代，Apache RocketMQ 是如何演进的？

作者&#xff1a;隆基 2022 年&#xff0c;RocketMQ 5.0 的正式版发布。相对于 4.0 版本而言&#xff0c;架构走向云原生化&#xff0c;并且覆盖了更多业务场景。 消息队列演进史 操作系统、数据库、中间件是基础软件的三驾马车&#xff0c;而消息队列属于最经典的中间件之一…
阅读更多...
用python需要下载软件吗,python需要安装哪些软件

用python需要下载软件吗,python需要安装哪些软件

大家好&#xff0c;本文将围绕安装python需要什么样的电脑配置展开说明&#xff0c;python需要安装哪些软件是一个很多人都想弄明白的事情&#xff0c;想搞清楚用python需要下载软件吗需要先了解以下几个事情。 编程这东西很神奇。对于那些知道如何有用和有趣的这个工具,对于Xi…
阅读更多...
Windows 实例如何开放端口

Windows 实例如何开放端口

矩池云 Windows 实例相比于 Linux 实例&#xff0c;除了在租用机器的时候自定义端口外&#xff0c;还需要在 Windows防火墙中添加入口规则。接下来将教大家如何设置 Windows 防火墙&#xff0c;启用端口。 租用成功后通过 RDP 链接连接服务器&#xff0c;然后搜索防火墙&#x…
阅读更多...
React的UmiJS搭建的项目集成海康威视h5player播放插件H5视频播放器开发包 V2.1.2

React的UmiJS搭建的项目集成海康威视h5player播放插件H5视频播放器开发包 V2.1.2

最近前端的一个项目&#xff0c;大屏需要摄像头播放&#xff0c;摄像头厂家是海康威视的&#xff0c;网上找了一圈都没有React集成的&#xff0c;特别是没有使用UmiJS搭脚手架搭建的&#xff0c;所以记录一下。 海康威视的开放平台的API地址&#xff0c;相关插件和文档都可以下…
阅读更多...
简单的python有趣小程序,有趣的代码大全python

简单的python有趣小程序,有趣的代码大全python

这篇文章主要介绍了python简单有趣的程序源代码&#xff0c;具有一定借鉴价值&#xff0c;需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获&#xff0c;下面让小编带着大家一起了解一下。
阅读更多...
Hadoop学习日记-YARN组件

Hadoop学习日记-YARN组件

YARN(Yet Another Resource Negotiator)作为一种新的Hadoop资源管理器&#xff0c;是另一种资源协调者。 YARN是一个通用的资源管理系统和调度平台&#xff0c;可为上层应用提供统一的资源管理和调度 YARN架构图 YARN3大组件&#xff1a; &#xff08;物理层面&#xff09…
阅读更多...
ICML 2023 | 拓展机器学习的边界

ICML 2023 | 拓展机器学习的边界

编者按&#xff1a;如今&#xff0c;机器学习已成为人类未来发展的焦点领域&#xff0c;如何进一步拓展机器学习技术和理论的边界&#xff0c;是一个极富挑战性的重要话题。7月23日至29日&#xff0c;第四十届国际机器学习大会 ICML 2023 在美国夏威夷举行。该大会是由国际机器…
阅读更多...
HarmonyOS/OpenHarmony元服务开发-配置卡片的配置文件

HarmonyOS/OpenHarmony元服务开发-配置卡片的配置文件

卡片相关的配置文件主要包含FormExtensionAbility的配置和卡片的配置两部分&#xff1a; 1.卡片需要在module.json5配置文件中的extensionAbilities标签下&#xff0c;配置FormExtensionAbility相关信息。FormExtensionAbility需要填写metadata元信息标签&#xff0c;其中键名称…
阅读更多...
CentOS 7安装Docker

CentOS 7安装Docker

文章目录 &#x1f31e;版本选择☀️1.CentOS安装Docker&#x1f331;1.1.卸载&#xff08;可选&#xff09;&#x1f331;1.2.安装docker&#x1f331;1.3.启动docker&#x1f331;1.4.配置镜像加速 ☀️2.CentOS7安装DockerCompose&#x1f331;2.1.下载&#x1f331;2.2.修改…
阅读更多...
赛车游戏——【极品飞车】（内含源码inscode在线运行）

赛车游戏——【极品飞车】（内含源码inscode在线运行）

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★前端炫酷代码分享 ★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ 解决算法&#xff0c;一个专栏就够了★ ★ 架…
阅读更多...
【Lua学习笔记】Lua进阶——Table（3） 元表

【Lua学习笔记】Lua进阶——Table（3） 元表

接上文 文章目录 元表__tostring__call__index__newindex运算符元方法其它元表操作 元表 Q&#xff1a;为什么要使用元表&#xff1f; A&#xff1a;在Lua中&#xff0c;常常会需要表与表之间的操作。元表中提供了一些元方法&#xff0c;通过自定义元方法可以实现想要的功能&…
阅读更多...
时间复杂度为O(n2)的三种简单排序算法

时间复杂度为O(n2)的三种简单排序算法

1.冒泡排序 冒泡排序只会操作相邻的两个数据。每次冒泡操作都会对相邻的两个元素进行比较&#xff0c;看是否满足大小关系要求。如果不满足就让它俩互换。一次冒泡会让至少少一个元素移动到它应该在的位置&#xff0c;重复n次&#xff0c;就完成了n个数据的排序工作。 /*** …
阅读更多...
数据包在网络中传输的过程

数据包在网络中传输的过程

ref: 【先把这个视频看完了】&#xff1a;数据包的传输过程【网络常识10】_哔哩哔哩_bilibili 常识都看看 》Ref&#xff1a; 1. 这个写的嘎嘎好&#xff0c;解释了为啥4层7层5层&#xff0c;还有数据包封装的问题:数据包在网络中的传输过程详解_数据包传输_张孟浩_jay的博客…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023