行业知识
找到刀郎《罗刹海市》--微信小程序调用地图--【小程序花园】
���信目录集链接在此：
| 详细解析黑马微信小程序视频–【思维导图知识范围】 | 难度★✰✰✰✰ |
|---|
不会导入/打开小程序的看这里：参考
| 让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】 |
|---|
文章目录
- 本系列校训
- 学习资源的选择
- 地图在小程序里的样子
- 必备的理论知识
- 百度地图
- 腾讯地图
- 坐标拾取器 - 腾讯地图
- 地图坐标拾取器使用
- map组件
- 基础内容 view/text/image/button
- 打开资源项目
- 关于我们页面
- 可以秒杀90%初学者的技能。
- 提高一下
- 验证代码
- 配套资源
- 作业：
本系列校训
用免费公开视频，卷飞培训班哈人！打***不报班，赚钱靠狠干！
只要自己有电脑，前后项目都能搞！N年苦学无人问，一朝成名天下知！
学习资源的选择
黑马程序员微信小程序开发前端教程_零基础玩转微信小程序（130集）
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下：
…
P303-微信小程序的环境准备08:21 00:00 到 05：16 获取APPid, 后面下载开发工具。
地图在小程序里的样子
《聊斋志异之罗刹海市》原文及译文
“原文: 马骥字龙媒,贾人子,美丰姿,少倜傥,喜歌舞。辄从梨园子弟,以锦帕缠头,美如好女,因复有“俊人”之号。十四岁入郡庠,即知名。父衰老罢贾而归,谓生曰:“数卷书,饥不可煮,寒不可衣,吾儿可仍继父贾。”马由是稍稍权子母。从人浮海,为飓风引去,数昼夜至一都会。其人皆奇丑,见马至,以为妖,群哗而走。马初见其状,大惧,迨知国中之骇己也,遂反以此欺国人。遇饮食者则奔而往,人惊遁,则啜其余。久之入山村,其间形貌亦有似人者,然褴褛如丐。
不管是小程序的社交圈还是打卡都是特别的实用。
必备的理论知识
百度地图
百度旗下出行类应用软件
百度地图（Baidu Maps）自2005年上线以来，秉持“科技让出行更简单”的品牌使命，以"科技"为手段不断探索创新，已经发展成为国内领先的互联网地图服务商。百度地图具备全球化地理信息服务能力，包括智能定位、POI检索、路线规划、导航、路况、实时公交等。伴随着AI时代的到来，作为“新一代人工智能地图”，百度地图90%数据生产环节已实现AI化 [1] ，智能语音助手累计用户数突破5亿 [2] ，并上线全球首个地图语音定制功能，让用户出行更具个性化。
百度地图覆盖POI 达1.8亿 [29] ， 道路里程超1000万公里 [3] ，刷新了行业新高度。同时，百度地图是业内拥有丰富全景数据的地图服务商，街道全景已覆盖国内95%的城市，全景照片突破20亿张 [2] 。2022年1月，百度地图全国商场店铺覆盖率达98%。 [45] 截至2022年9月，百度地图行业首创的车位级导航已落地全国20余座城市 [47] 。
2023年5月，百度地图北⽃⾼精定位⽇调⽤量超5000亿次，已攻克隧道、地下/室内、城市车道等多个导航极端场景。 [50] [53]
腾讯地图
腾讯公司推出的互联网地图软件
腾讯地图，前称SOSO地图。这是由腾讯公司推出的一种互联网地图服务。腾讯地图拥有导航地图甲级测绘资质和互联网地图服务甲级资质。 [8-9]
腾讯地图APP为用户提供包括智能路线规划、精准导航、实时路况、聚合打车、公共出行等位置和出行相关服务，并提供购物、美食等周边生活服务。腾讯地图已接入2000多套室内地图，覆盖各大机场、火车站和主流商场。支持国内200多个城市的实时路况刷新，让用户出行生活更加高效。
坐标拾取器 - 腾讯地图
腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案;有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类.
这里要注意一下，在小程序里调用百度地图是有少许的位置偏差的，不也过没有太远的距离，影响不大，但是终究还是没有腾讯地图精准，当然了，也有解决方案
微信小程序腾讯地图坐标和百度地图坐标偏差纠正的解决
// 百度经纬度转腾讯经纬度function convert2TecentMap(lng, lat) { if (lng == '' && lat == '') { return { lng: '', lat: '' } } var x_pi = 3.14159265358979324 * 3000.0 / 180.0 var x = lng - 0.0065 var y = lat - 0.006 var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi) var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi) var qqlng = z * Math.cos(theta) var qqlat = z * Math.sin(theta) return { lng: qqlng, lat: qqlat }}// 腾讯经纬度转百度经纬度function TxMapTransBMap(lng, lat) { let x_pi = 3.14159265358979324 * 3000.0 / 180.0; let x = lng; let y = lat; let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi); let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi); let lngs = z * Math.cos(theta) + 0.0065; let lats = z * Math.sin(theta) + 0.006; return { lng: lngs, lat: lats }; }所以这只是一个转换，那么本文当然就以腾讯地图举例了。
地图坐标拾取器使用
我愿意陪你翻过雪山穿越戈壁
可你不辞而别还断绝了所有的消息
心上人我在可可托海等你
他们说你嫁到了伊犁
是不是因为那里有美丽的那拉提
还是那里的杏花
才能酿出你要的甜蜜
毡房外又有驼铃声声响起
我知道那一定不是你
再没人能唱出像你那样动人的歌曲
再没有一个美丽的姑娘让我难忘记
所以，直接在地图上查到《伊犁》
取到GPS坐标，当前坐标（43.942406,81.265869）
map组件
官方文档在此https://developers.weixin.qq.com/miniprogram/dev/component/map.html
map
基础库 1.0.0 开始支持，低版本需做兼容处理。
微信 Windows 版：支持
微信 Mac 版：支持
相关文档: wx.createMapContext
渲染框架支持情况：Skyline （使用最新 Nighly 工具调试）、WebView
功能描述
地图 v2.7.0 起支持同层渲染。
map组件提供了地图展示、交互、叠加点线面及文字等功能，同时支持个性化地图样式，可结合地图服务 API 实现更丰富功能。
地图个性化样式组件
地图个性化样式组件是腾讯位置服务为开发者提供的地图高级能力，开发者可以在法律允许的范围内，定制背景面、背景线、道路、POI等多种地图元素，灵活地设计心仪的地图样式。
购买该能力后，您可以在MP平台「管理->付费管理->概览->地图个性化样式->去使用」中创建配置您的地图个性化样式，您可以选择我们提供的基础及高级模版，也可以通过在线编辑平台，对多种地图元素的样式进行自定义设置，以满足在不同场景下的个性化需求。
基础内容 view/text/image/button
官方文档在此 https://developers.weixin.qq.com/miniprogram/dev/component/text.html
(略…可以参看本博主其它系列)
打开资源项目
小程序的下方可以直接放一个地图组件，
然后，定位到伊犁
关于我们页面
