微信小程序实现定位及到指定位置导航的示例代码

一：实现定位及到指定位置导航所需组件及API

1：组件：map(地图组件)

2：API：wx.getLocation(Object object)(获取当前的地理位置、速度)，wx.openLocation(Object object)(使用微信内置地图查看位置)

二：代码实现

1：wxml

<view>
<map id="map"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="14"
markers="{{markers}}"
bindmarkertap="markertap"
bindregionchange="regionchange"
show-location
style="width: 100%; height: 300px;"
>
</map>
</view>
<view>
<button type="primary" bindtap="navigate">导航</button>
</view>

2：js

//js
Page({
/**
  * 页面的初始数据
  */
data: {
//设置标记点
markers: [
{
iconPath: "/images/ljx.png",
id: 4,
latitude: 31.938841,
longitude: 118.799698,
width: 30,
height: 30
}
],
//当前定位位置
latitude:'',
longitude: '',
},
navigate() {
////使用微信内置地图查看标记点位置，并进行导航
wx.openLocation({
latitude: this.data.markers[0].latitude,//要去的纬度-地址
longitude: this.data.markers[0].longitude,//要去的经度-地址
})
},
onLoad() {
//获取当前位置
wx.getLocation({
type: 'gcj02',
success: (res) => {
console.log(res)
this.setData({
latitude: res.latitude,
longitude: res.longitude
})
}
})
}
})

根据如上即可实现自身定位及到指定位置的导航，如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序 定位到当前城市实现实例代码

    微信小程序 定位到当前城市 首先需要申请百度地图Geocoding API Geocoding API包括地址解析和逆地址解析功能: 1.地理编码:即地址解析,由详细到街道的结构化地址得到百度经纬度信息,例如:"北京市海淀区中关村南大街27号"地址解析的结果是"lng:116.31985,lat:39.959836".同时,地理编码也支持名胜古迹.标志性建筑名称直接解析返回百度经纬度,例如:"百度大厦"地址解析的结果是"lng:116.

  • 微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

    微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

    本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能.分享给大家供大家参考,具体如下: 效果图 实现原理 采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city 指定位置的天气数据. WXML <view class="map-weather"> <view><text>城市:</text&

  • 微信小程序ibeacon三点定位详解

    空余时间简单写了一个微信小程序ibeacon三点定位. 事先淘宝买了七八个ibeacon小设备,放置在办公司角落.分别设置三个ibeacon的位置坐标点,根据每一个ibeacon到已经开启蓝牙的目标物距离,计算出目标物在当前区域内坐标位置.适用于区域内购物指示.当然,进入该区域事先要打开手机蓝牙. 下面代码: var app = getApp() Page({ data: { motto: 'Hello World', openBLE:'打开蓝牙设备', startBLEDiscovery:'初

  • 微信小程序定位当前城市的方法

    微信小程序定位当前城市的方法

    微信小程序定位获取当前所在城市,供大家参考,具体内容如下 1.利用微信小程序接口 wx.getLocation() 获取当前经纬度,接口. 2.拿到经纬度之后,通过微信的wx.request()请求百度地图的解析接口,传入我们获取到的经纬度,拿到当前定位的城市. Page({ data: { city: '' }, onLoad: function (options) { this.loadInfo(); }, loadInfo: function () { var page = this wx

  • 微信小程序城市定位的实现实例（获取当前所在国家城市信息）

    微信小程序城市定位的实现实例（获取当前所在国家城市信息）

    前言 在微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是当前位置的经纬度.如果我们想获取当前位置是处于哪个国家,哪个城市等信息,该如何实现呢? 实现方法 微信小程序中并没有提供这样的API,但是没关系,有wx.getLocation()得到的经纬度作为基础就够了,其他的,我们可以使用其他第三方地图服务可以来实现,比如腾讯地图或百度地图的API. 以腾讯地图为例,我们可以去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key).

  • 微信小程序 图片绝对定位(背景图片)

    微信小程序 图片绝对定位 前言: 在小程序中,有时需要用到背景图片,但是如果使用background-image的话,就无法控制图片的大小,background-image一般用于将图片压缩为1像素的背景图片,然后自动填充铺满.使用背景图片的话,一般使用一些新的view层,如<image class="jxlogo" src="../../image/jx.png"/>等,但是小程序与html类似,一个不同的 css或wxss会占据一个位置,然后接下来的

  • 微信小程序 地图定位简单实例

    微信小程序 地图定位简单实例

    微信小程序开发地图定位. 微信小程序 刚刚公布没多久,自己学习一下内容,以便以后的开发,想落后别人,这里做了一个简单的小程序示例,大家可以参考下 要求要完成的功能: 1.要完成的要点是城市定位. 2.就是切换城市. 首页我们先参照微信小程序开放的官方文档找到: 在这里我们可以找到"当前位置经纬度" getLocation: function () { var that = this wx.getLocation( { success: function (res) { console.

  • 微信小程序实现获取准确的腾讯定位地址功能示例

    微信小程序实现获取准确的腾讯定位地址功能示例

    本文实例讲述了微信小程序实现获取准确的腾讯定位地址功能.分享给大家供大家参考,具体如下: 官方参考文档:https://lbs.qq.com/qqmap_wx_jssdk/index.html 逆地址解析(坐标位置描述) 1. 申请开发者密钥(key)与设置 个人使用:登录,点击"key管理",进入设置,选择"WebServiceAPI",如果没有小程序ID,勾选"授权IP",如果有小程序ID,勾选"域名白名单",且勾选&qu

  • 微信小程序实现自动定位功能

    本文实例为大家分享了微信小程序实现自动定位的具体代码,供大家参考,具体内容如下 使用了腾讯地图提供的免费api: 需要引入一个js文件:下载地址 js代码: // 引入SDK核心类 var QQMapWX = require('../../libs/qqmap-wx-jssdk.js'); var qqmap = new QQMapWX({ //在腾讯地图开放平台申请密钥 http://lbs.qq.com/mykey.html key: 'your KEY' }); Page({ data:

  • 小程序开发踩坑：页面窗口定位（相对于浏览器定位）（推荐）

    开发中我们要做一些类似遮罩层或者页面header固定而页面内容滚动的效果时,往往会使用到:position: fiexd;属性,但是往往会出现绑定在定位元素上的事件无法触发,原因出现在哪里? 经过摸索,终于找到答案:元素定位之后, z-index的值默认还是0,又因为定位而导致元素脱离了原来的文档流(page页面层),所以,定位元素相对于用户来说,虽然看得见,但是就像已经"不存在"一样,所以必须设置值:z-index至少大于等于1,将定位元素暴露给用户,这样才能触发绑定在元素之上的事件

随机推荐