微信小程序如何获取地理位置和进行地图导航

一.获取地理位置 由于小程序只提供了我们一个获取地理位置、速度的api,并没有获取的相关地位位置的信息等,我们利用百度地图的api来获取地位位置。

文档

1.申请ak http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key

2.下载百度地图的api ,链接:http://download.csdn.net/detail/michael_ouyang/9754015 解压后,里面有2个js文件,一个是常规没压缩的,另一个是压缩过的 PS:由于小程序项目文件大小限制为1M,建议使用压缩版的js文件!

用5kb那个js

3.引入JS模块

放在utils下

4.在所需的js文件内导入js // 引用百度地图,注意:require传入一个相对路径 var bmap = require('../../utils/bmap-wx/bmap-wx.js');

5.编辑代码 .wxss代码为

<view>  
    <viwe>经度:{{longitude}}</viwe>  
    <view>纬度:{{latitude}}</view>  
    <view>地址:{{address}}</view>  
    <view>城市:{{cityInfo.city}}</view>  
</view>  

.js代码为:

var bmap = requir('../../utils/bmap-wx/bmap-wx.min.js');
var wxMarkerData = [];  //定位成功回调对象  
Page({
  data: {
    ak: "FHG7utZtdyXN2", //填写申请到的ak  
    markers: [],
    longitude: '',   //经度  
    latitude: '',    //纬度  
    address: '',     //地址  
    cityInfo: {}     //城市信息  
  },
  onLoad: function (options) {
    var that = this;
    /* 获取定位地理位置 */
    // 新建bmap对象   
    var BMap = new bmap.BMapWX({
      ak: that.data.ak
    });
    var fail = function (data) {
      console.log(data);
    };
    var success = function (data) {
      //返回数据内,已经包含经纬度  
      console.log(data);
      //使用wxMarkerData获取数据  
      wxMarkerData = data.wxMarkerData;
      //把所有数据放在初始化data内  
      that.setData({
        markers: wxMarkerData,
        latitude: wxMarkerData[0].latitude,
        longitude: wxMarkerData[0].longitude,
        address: wxMarkerData[0].address,
        cityInfo: data.originalData.result.addressComponent
      });
    }
    // 发起regeocoding检索请求   
    BMap.regeocoding({
      fail: fail,
      success: success
    });
  }

})  

6.运行 注意:楼主的运行环境在模拟器上,在模拟器所获取到的定位是有一些误差的,如需测试真正的地理位置信息,还需要使用真机测试!!!

结果

二.进行地图导航

微信小程序里面是不能导航的,原因是小程序的代码最多只能有1M,他的运行内存只能有10M,一个区域地图下载下来就不止1M了所以在应用内我们无法做到导航的,但是应用外呢!

关于APP开发,一般如果导航这个功能不是很重要的话就会放到应用外来做这个功能,但是高德地图和腾讯地图都会有响应的SDK,可是小程序不同,我们该如何在小程序外调用导航功能呢?

打开小程序中关于位置的API, 1.wx.getLocation(OBJECT) 获取当前的地理位置、速度。 2.wx.chooseLocation(OBJECT) 打开地图选择位置。 3.wx.openLocation(OBJECT) ​使用微信内置地图查看位置。

查看长沙理工大学

具体实现代码为:

wx.getLocation({
  type: 'gcj02', //返回可以用于wx.openLocation的经纬度
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    wx.openLocation({
      latitude: latitude,
      longitude: longitude,
      name:"长沙理工大学",
     scale: 28
    })
  }
})

点击绿点出现如图:

选择地图

选择手机上的地图,然后就跳到了对应的地图APP上,实现了应用外调用导航功能。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

微信小程序:字体保持大小

小程序和网页差不多,前台用wxml把内容摆好,然后用css调整样式。所以和web一样,必须要能够精确控制每一个元素的大小。在Web中,通过CSS基本达到了像素级...

3347
来自专栏YouTube

YouTube视频下载的常用5种方法

YouTube是个优秀的视频网站,在这里你可以与朋友、家人或者全世界分享自己的经验或创意。YouTube和国内的B站差不多,广告少,资源良心,不像有些网站,动不...

1.7K12
来自专栏从零开始学自动化测试

Appium+python自动化22-Android夜神模拟器

前言 Android SDK虽然也自带了模拟器,但是那速度会让你怀疑人生,并且不稳定经常卡死异常。夜神模拟器可以说是android模拟器里面的一个神器。 ...

4473
来自专栏前端布道

前端开发必备之chrome插件

Chrome浏览器目前是网络上可用的最好的浏览器之一,并且自2011年11月超越了Firefox浏览器之后,已经成为了互联网上占主导地位的浏览器。 本篇文章将与...

3216
来自专栏黒之染开发日记

微信开发中遇到的坑

1、 用微信的文件上传功能,一次只能上传一个文件,多个上传还要用setTimeout把前后时间设到100毫秒左右...

662
来自专栏菩提树下的杨过

silverlight3的"伪"3D续--图片横向轮换

上一篇里,已经知道了“伪3D”是怎么回事,今天结合以前的做的图片广告轮换,又弄了一个图片切换的小东东,不知道以后有什么用,先贴在这里备份: 效果图: ? 因为s...

1919
来自专栏小文博客

Jaguar——简约大气——WordPress主题

1298
来自专栏张善友的专栏

JQuery相关资料

将SEO,WEB标准与AJAX进行到底 - JQuery(翻译+学习总结) jQuery——JavaScript冲击波 《15天漫游jQuery》 小试牛刀——...

1928
来自专栏AndroidTraveler

Android 8.0 的部分坑及对应解决方法

但是迟到好过不到,因此基于此这边还是记录一下项目中遇到的 Android 8.0 的坑及对应解决方法。

941
来自专栏宏伦工作室

微信红包自动监测

3233

扫码关注云+社区