如果有一款微信小程序可以每隔几分钟就发一个地图定位会怎么样？

微信目录集链接在此：

详细解析微信小程序知识点–【思维导图知识范围】	难度★✰✰✰✰

不会导入/打开小程序的看这里：参考

让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】

知识总是在用的时候才知道重要

最近某事件，在营救的过程中，他的女友嘉嘉起到了很大作用，事情发生了，她没有慌乱只会哭，而是沉着冷静，大招尽出。

王❋女友“教科书式求救”：
关键三步值得肯定，抓住72小时“黄金时间”

• 失联后第一时间报警非常重要
• 沿途定位线索汇总帮助很大
• 上网发声达到“众人拾柴火焰高”效果

王❋女朋友的要求隔断时间定位的启示

如果我们不能每个人都配备王❋女朋友这样的女朋友，那我们普通人能做到什么？如果存在一款微信小程序，你打开定时发送定位呢？
如果每10分钟发送一次定位（带地图信息）给你需要发送的人，那么，是不是每个人都等于拥有了一个如此给力的女朋友呢？

地图在小程序里的样子

不管是小程序的社交圈还是打卡都是特别的实用。

如果有外出定时发送定位。那么小程序完全可以把下图的前多少次定位全部标注出来。
在这里插入图片描述

有这样的想法的商家请加马加编

我要代表大众感谢您，您把大众的安全放在第一线了。当然，时间允许的话，我也想自己做一个这样的程序，免费开源出来。
人身安全太重要了！！

必备的理论知识

百度地图

百度旗下出行类应用软件
百度地图（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] 。

坐标拾取器

腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案;有针对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

(略…可以参看本博主其它系列)

打开资源项目

小程序的下方可以直接放一个地图组件，
然后，定位到伊犁

关于我们页面

<!--pages/our/index.wxml-->
<view class="container">
  <view class="shop_image">
    <image src="{{src}}"></image>
  </view>
  <view class="about_us">
    <text>这是一段示例文字</text>
    <text decode="{{true}}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
“原文: 马骥字龙媒,贾人子,美丰姿,少倜傥,喜歌舞。辄从梨园子弟,以锦帕缠头,美如好女,因复有“俊人”之号。十四岁入郡庠,即知名。
    </text>
  </view>
  <view class="addr_phone">
    <text decode="{{true}}">公司地址&nbsp;&nbsp;&nbsp;&nbsp;</text>
    <text>伊犁 </text>
  </view>
  <view class="addr_phone">
    <text decode="{{true}}">公司接待&nbsp;&nbsp;&nbsp;&nbsp;</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: '刀郎出品，放心的选择'
    }
  }
  
})

可以秒杀70%初学者的技能。

找到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/88216818

作业：

1 下载配套资源阅读里面的JS结构，将打开的地图改成“四川九寨沟”。（难度★★★✫✫）
2 查阅资料，找到王星失踪之地“苗瓦迪”。（难度★★★★★★★★★★）满十星