找到刀郎《罗刹海市》--微信小程序调用地图--【小程序花园】
微信目录集链接在此：
| 详细解析黑马微信小程序视频–【思维导图知识范围】 | 难度★✰✰✰✰ |
|---|
不会导入/打开小程序的看这里：参考
| 让别人的小程序长成自己的样子-更换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
(略…可以参看本博主其它系列)
打开资源项目
小程序的下方可以直接放一个地图组件，
然后，定位到伊犁
关于我们页面
<view class="container">
<view class="shop_image">
<image src="{{src}}">image>
view>
<view class="about_us">
<text>《聊斋志异之罗刹海市》原文及译文text>
<text decode="{{true}}">
“原文: 马骥字龙媒,贾人子,美丰姿,少倜傥,喜歌舞。辄从梨园子弟,以锦帕缠头,美如好女,因复有“俊人”之号。十四岁入郡庠,即知名。父衰老罢贾而归,谓生曰:“数卷书,饥不可煮,寒不可衣,吾儿可仍继父贾。”马由是稍稍权子母。从人浮海,为飓风引去,数昼夜至一都会。其人皆奇丑,见马至,以为妖,群哗而走。马初见其状,大惧,迨知国中之骇己也,遂反以此欺国人。遇饮食者则奔而往,人惊遁,则啜其余。久之入山村,其间形貌亦有似人者,然褴褛如丐。
text>
view>
<view class="addr_phone">
<text decode="{{true}}">公司地址 text>
<text>伊犁 text>
view>
<view class="addr_phone">
<text decode="{{true}}">公司接待 text>
<text>美丽的那拉提text>
view>
<view class="contaxt_info">
<view class="call" bindtap="calling">
<image src="{{call_image}}">image>
view>
<view class="addr">
<button bindtap="addring">
<image src="{{ditu_image}}">image>
<text>本店导航text>
button>
view>
view>
<map id="myMap" show-location>map>
view>
因为使用到的绑定变量，所以还需要相应的JS代码。
// pages/our/index.js
Page({
/**
* 页面的初始数据
*/
data: {
src: '/image/shop.jpg',
call_image: '/image/dianhua.jpg',
ditu_image: '/image/ditu.png'
},
calling: function() {
wx.makePhoneCall({
phoneNumber: '15132069967',
success: function(){
wx.showToast({
title: '拨打电话成功',
icon: 'success',
duration: 2000
})
},
fail: function(){
wx.showToast({
title: '拨打电话失败',
duration: 2000
})
}
})
},
addring: function(){
wx.getLocation({
success: function(res) {
wx.openLocation({
latitude: 39.8415143,
longitude: 116.4321115,
name: '顶秀金颐家园',
address: '北京市丰台区石榴庄二街1号顶秀金颐家园5号楼'
})
},
})
// wx.chooseLocation({
// success: function(res) {
// console.log(res);
// },
// })
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
mapCtx: null,
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.mapCtx = wx.createMapContext('myMap', this)
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
setTimeout(function () {
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
}, 2000);
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return {
title: '刀郎出品，放心的选择'
}
}
})
可以秒杀90%初学者的技能。
找到wxml 页面，直接键入latitude=“” longitude=“”
然后，我们要再去地图坐标拾取器里找到坐标。 坐标（43.942406,81.265869）
补充一点小知识：
经纬度是经度与纬度组成的坐标系统，是一种利用三度空间的球面来定义地球上的空间的球面坐标系统，能够标示地球上的任何一个位置。
纬线编辑 播报
纬线和经线一样是人类为度量方便而假设出来的辅助线，定义为地球表面某点随地球自转所形成的轨迹。任何一根纬线都是圆形而且两两平行。纬线的长度是赤道的周长乘以纬线的纬度的余弦，所以赤道最长，离赤道越远的纬线，周长越短，到了两极就缩为0。从赤道向北和向南，各分90°，称为北纬和南纬，分别用“N”和“S”表示。经度分东西，指南北，纬度分南北，指东西。
经线
经线也称子午线，和纬线一样是人类为度量方便而假设出来的辅助线，定义为地球表面连接南北两极的大圆线上的半圆弧。任两根经线的长度相等，相交于南北两极点。每一根经线都有其相对应的数值，称为经度。经线指示南北方向。
我国在地球上位置：
所以，明白了这个图，那么坐标（43.942406,81.265869） 这两个值就不可能填错了
提高一下
光是显示怎么能行呢？ 那必须得在手机上能打开，能导航这样才完美呀。
事件绑定。看相应的视频即可
详细解析黑马微信小程序视频–【思维导图知识范围】
addring: function(){
wx.getLocation({
success: function(res) {
wx.openLocation({
latitude: 39.8415143,
longitude: 116.4321115,
name: '顶秀金颐家园',
address: '北京市丰台区石榴庄二街1号顶秀金颐家园5号楼'
})
},
})
很显，我们需要改动的就是这样的代码。
改成：
addring: function(){
wx.getLocation({
success: function(res) {
wx.openLocation({
latitude: 43.942406,
longitude: 81.265869,
name: '那拉提',
address: '途经这里转海陆空三栖火箭去罗刹海市'
})
},
})
验证代码
完美！
关机，拉闸，领盒饭，走人，登火箭去罗刹海市
提示：如果一不小心出错
这个时候，Ctrl+Z (这个快捷键有必要记住) 基本上80%以上的编辑器程序都是用这个快捷方式恢复到前一步正确的代码。
如果在恢复这个错之前，把这个错误的截图，并保存，查看几下那就更好了。面对页面出错不是大惊小怪，而是看看是啥错误信息，那你基本具备了向高手迈进的姿势了。
配套资源
找到刀郎《罗刹海市》–微信小程序调用地图–【小程序花园】
https://download.csdn.net/download/dearmite/88123577
作业：
1 下载配套资源阅读里面的JS结构，将打开的地图改成“四川九寨沟”。（难度★★★✫✫）
2 查阅资料，找到聊斋志异之《罗刹海市》。（难度★★★★★★★★★★）满十星