pp电子

登录
免费开通

微信小程序凭证经纬度妄想蹊径

微信小程序可以通过API获取目今位置的经纬度,, ,,,那么若是凭证经纬度妄想蹊径怎么做。。

效果图:

 

微信小程序凭证经纬度妄想蹊径

1、wxml文件

<view class="mapHeight">
  <map 
    id="map" 
    class="map"
    polyline="{{polyline}}"
    markers="{{markers}}" 
    include-points="{{markers}}"
   ></map>
</view>

2、 js文件

var coors;
Page({
  data: {
    polyline: [],
    markers: [],
  },
  onReady: function() {
    this.mapContext = wx.createMapContext("map", this);
  },
  onLoad: function(options) {
    // 获取目今地图,,,,,设置经纬度,,,,,转达过来的坐标,,,,,用户下单的坐标地点。。
    console.log(options);
    wx.getLocation({
      success: (res) => {
        this.setData({
          latitude: options.latitude,
          longitude: options.longitude
        });
        this.getCenterLocation(res);
        wx.request({
          url: 'https://apis.map.qq.com/ws/direction/v1/driving/?from=' + this.data.markers[0].latitude + ',' + this.data.markers[0].longitude + '&to=' + this.data.markers[1].latitude + ',' + this.data.markers[1].longitude + '&output=json&callback=cb&key=PD5BZ-K2VRO-CPEWZ-SOBAC-4KCDT-KAFLF',
          success: (res) => {
            coors = res.data.result.routes[0].polyline
            for (var i = 2; i < coors.length; i++) {
              coors[i] = coors[i - 2] + coors[i] / 1000000
            }
            console.log(coors)
            //划线
            var b = [];
            for (var i = 0; i < coors.length; i = i + 2) {
              b[i / 2] = {
                latitude: coors[i],
                longitude: coors[i + 1]
              };
              console.log(b[i / 2])
            }
            this.setData({
              polyline: [{
                points: b,
                color: "#00ae20",
                width: 4,
                dottedLine: false
              }],
            })
          }
        })
      }
    });
  },
  //  两个坐标 一个下单地点,,,,,一个工程师接单地点,,,,,然后一直的更新工程师的坐标位置。。
  getCenterLocation: function(res) {
    this.setData({
      markers: [{
          iconPath: "/resources/center.png",
          id: 0,
          latitude: res.latitude,
          longitude: res.longitude,
          width: 30,
          height: 30,
          alpha: 0.8,
          callout: {
            content: " 我的位置 ",
            color: "#ffffff",
            fontSize: 10,
            borderRadius: 10,
            bgColor: "#6e707c",
            padding: 5,
            display: "ALWAYS"
          }
        },
        {
          iconPath: "/resources/user.png",
          id: 1,
          latitude: res.latitude + 0.1,
          longitude: res.longitude + 0.1,
          width: 30,
          height: 30,
          alpha: 0.8,
          callout: {
            content: " 工程师 ",
            color: "#ffffff",
            fontSize: 10,
            borderRadius: 10,
            bgColor: "#6e707c",
            padding: 5,
            display: "ALWAYS"
          }
        }
      ],
    });
  },
});

3、wxss文件

.mapHeight {
  display: flex;
  flex-direction: column;
}
.map {
  flex: 1;
  height: 100vh;
  width: 100%;
}

小程序工具提供多类型商城/门店小程序制作,, ,,,可视化编辑 1秒天生5步上线。。通过拖拽、拼接????榻峁剐〕绦蛏坛且趁,, ,,,所看即所得,, ,,,只需要美工就能做出细腻商城。。更多小程序市肆请审查:小程序市肆

微信小程序凭证经纬度妄想蹊径


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,, ,,,由于未联系到知识产权人或未发明有关知识产权的挂号,, ,,,若有知识产权人并不肯意我们使用,, ,,,若是有侵权请连忙联系。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,, ,,,仅系客观性形貌,, ,,,如您需要相识该类商品/服务详细的资讯,, ,,,请您直接与该类商品/服务的提供者联系。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商,, ,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。

KESION 一直通过手艺立异,, ,,,提供产品和服务,, ,,,助力企业向数字化转型,, ,,,通过科技驱动商业刷新,, ,,,让商业变得更智慧!



▼点击进入pp电子官网相识更多



热门标签
微信小程序 SaaS
上/下篇
  • 小程序验证码倒计时获取方式

  • 微信小程序中怎样翻开另一个小程序

换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序凭证经纬度妄想蹊径 - KESION pp电子