微信小程序自带地图_微信小程序地图（map）实例详解

微信小程序地图(map)实例

这里是小编对微信小程序地图(map API )做的资料整理，获取当前的地址，应该如何实现的实例，大家可以看下。

今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试结果.

上图:

经纬度不说了.定位用的,我这里直接输入的数字定位.但是有许多问题

下图中scale是缩放比例,这个属性目前无效.后期微信团队应该会修复.毕竟现在刚开始公测.这样就导致我不管怎么修改scale,我的地图都是在默认的缩放比例.如上图.

markers中的rotate是图标的旋转角度.如果需要平行于屏幕的图标,那就设置为0吧.

另外,覆盖物的图标是可以修改的.给iconPath设置路径即可.

上一段代码:

定位

//index.js

//获取应用实例

var app = getApp()

Page({

data: {

latitude: 0,//纬度

longitude: 0,//经度

speed: 0,//速度

accuracy: 16,//位置精准度

markers: [],

covers: [],

onLoad: function () {

getlocation: function () {

var markers = [{

latitude: 31.23,

longitude: 121.47,

name: '浦东新区',

desc: '我的位置'

}]

var covers = [{

latitude: 31.23,

longitude: 121.47,

iconPath: '../images/car.png',

rotate: 0

}]

this.setData({

longitude: 121.47,

latitude: 31.23,

markers: markers,

covers: covers,

})

}

})

2.wx.getLocation(OBJECT) 获取当前位置API

红色框标出的就是经纬度,速度,精确度

用gch02返回的坐标可以直接打开地图.

具体api见文档

3.wx.openLocation(OBJECT) 查看位置

最简单粗暴的就是直接给经纬度定位.

代码:

/index.js

//获取应用实例

var app = getApp()

Page({

data: {

latitude: 0,//纬度

longitude: 0,//经度

speed: 0,//速度

accuracy: 16,//位置精准度

markers: [],

covers: [],

onLoad: function () {

getlocation: function () {

wx.getLocation({

type: 'gcj02',

success: function (res) {

var latitude = res.latitude

var longitude = res.longitude

var speed = res.speed

var accuracy = res.accuracy

console.log("latitude:" + latitude)

console.log("longitude:" + longitude)

console.log("speed:" + speed)

console.log("accuracy:" + accuracy)

wx.openLocation({

latitude: latitude,

longitude: longitude,

scale: 28

})

}

})

}

})

真机测试效果图:

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序自带地图_微信小程序地图（map）实例详解相关推荐

python ks值计算_利用Python计算KS的实例详解
在金融领域中,我们的y值和预测得到的违约概率刚好是两个分布未知的两个分布.好的信用风控模型一般从准确性.稳定性和可解释性来评估模型.sOf免费资源网一般来说.好人样本的分布同坏人样本的分布应该是有很 ...
php把微信一键登录,PHP微信第三方实现一键登录及获取用户信息的方法（实例详解）...
这篇文章主要介绍了PHP版微信第三方实现一键登录及获取用户信息的方法,较为详细的分析了微信第三方登陆的相关注意事项与实现技巧,需要的朋友可以参考下注意,要使用微信在第三方网页登录是需要"服 ...
android饿了么购物车,Android仿饿了么加入购物车旋转控件自带闪转腾挪动画的按钮效果(实例详解)...
概述在上文,酷炫Path动画已经预告了,今天给大家带来的是利用纯自定义View,实现的仿饿了么加入购物车控件,自带闪转腾挪动画的按钮. 效果图如下: 图1 项目中使用的效果,考虑到了View的回收 ...
java富文本传图片_使用富文本编辑器上传图片实例详解
富文本编辑器上传图片一.导入kindeditor的js 二.将kindeditor与一个文本域textarea进行关联,即用textarea初始化一个kindeditor对象 itemaddedit ...
微信小程序获取带表情的微信名乱码问题
微信小程序获取带表情的微信名乱码问题在后台获取完微信用户数据后,对微信名进行UTF-8编码 URLEncoder.encode(nickName, "utf-8") ,将编码后的 ...
uniapp —— 小程序实现带参分享微信、朋友圈以及调试获取参数
uniapp -- 小程序实现带参分享微信.朋友圈以及调试获取参数零.起因以及分类小程序我们在开发微信小程序的过程中,经常需要实现分享给微信用户或者分享到微信朋友圈的功能,基本上我们会用到 on ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
php微信小程序物流进度推送,微信小程序消息推送php服务器验证实例详解
微信小程序消息推送php服务器验证实例详解设置页面("设置">>"开发设置"): 1.设置服务器域名注意http和https协议的不同. 2. ...

微信小程序自带地图_微信小程序地图（map）实例详解

微信小程序自带地图_微信小程序地图（map）实例详解相关推荐

最新文章

热门文章

微信小程序自带地图_微信小程序 地图（map）实例详解

微信小程序自带地图_微信小程序 地图（map）实例详解相关推荐

最新文章

热门文章

微信小程序自带地图_微信小程序地图（map）实例详解

微信小程序自带地图_微信小程序地图（map）实例详解相关推荐