微信小程序 地图map实例详解

 更新时间:2017年06月07日 16:22:00   作者:yuzeng84  
这篇文章主要介绍了微信小程序 地图map实例详解的相关资料,需要的朋友可以参考下

微信小程序 地图map实例详解

wxml:

class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位 
 longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" 
style="width: 100%; height: 300px;margin-top:30px">

js:

//获取应用实例 
var app = getApp()
Page({
data: {
latitude: 0,//纬度 
longitude: 0,//经度 
speed: 0,//速度 
accuracy: 16,//位置精准度 
markers: [],
covers: [],
},
onLoad: function () {
},
getlocation: function () {
var markers = [{
latitude: 28.211400,
longitude: 112.914250,
name: '喜地大厦',
desc: '我的位置'
}]
var covers = [{
latitude: 28.211400,
longitude: 112.914250,
iconPath: '/image/ic_position.png',
rotate: 0
}]
this.setData({
longitude: 112.914250,
latitude: 28.211400,
markers: markers,
covers: covers,
})
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
})
}
})
}
})

效果图:

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

相关文章

  • 微信小程序 详解下拉加载与上拉刷新实现方法

    微信小程序 详解下拉加载与上拉刷新实现方法

    这篇文章主要介绍了微信小程序 详解下拉加载与上拉刷新实现方法的相关资料,这里介绍了两种实现方法,需要的朋友可以参考下
    2017-01-01
  • 详解微信小程序开发之——wx.showToast(OBJECT)的使用

    详解微信小程序开发之——wx.showToast(OBJECT)的使用

    本篇文章主要介绍了微信小程序开发之——wx.showToast(OBJECT)的使用,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01
  • JS原始类型为什么能调用方法原理详解

    JS原始类型为什么能调用方法原理详解

    这篇文章主要为大家介绍了JS原始类型为什么能调用方法原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 关于JavaScript防抖与节流的区别与实现

    关于JavaScript防抖与节流的区别与实现

    这篇文章主要介绍关于JavaScript防抖与节流的区别与实现,防抖就是用户多次触发事件,在用户一直触发事件中,事件不会执行,只有在用户停止触发事件一段时间之后再执行这个事件一次,二节流是用户多次触发事件,具体详情一i起来学习下面文章内容吧
    2021-10-10
  • JavaScript内置对象介绍

    JavaScript内置对象介绍

    这篇文章主要介绍了JavaScript内置对象,内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能,下面我们一起进入文章了解更多详细内容
    2021-12-12
  • 无UI 组件Headless框架逻辑原理用法示例详解

    无UI 组件Headless框架逻辑原理用法示例详解

    这篇文章主要为大家介绍了无UI 组件Headless框架逻辑原理用法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 5个实用的JavaScript新特性

    5个实用的JavaScript新特性

    这篇文章主要为大家介绍了5个实用的JavaScript新特性,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 15个值得收藏的JavaScript函数

    15个值得收藏的JavaScript函数

    在开发一个JavaScript项目时,经常会用到以前开发过的一些工具函数,收集这些函数,当你需要它们的时候,将节省你大量的开发时间,本文将给大家带来15个常用的工具函数,需要的小伙伴可以参考下
    2021-09-09
  • 微信小程序之绑定点击事件实例详解

    微信小程序之绑定点击事件实例详解

    这篇文章主要介绍了 微信小程序之绑定点击事件实例详解的相关资料,需要的朋友可以参考下
    2017-07-07
  • Fabric.js 保存自定义属性方法示例

    Fabric.js 保存自定义属性方法示例

    这篇文章主要为大家介绍了Fabric.js 保存自定义属性方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02

最新评论