查看: 3340|回复: 0

[JavaScript/JQuery] 微信小程序 地图map实例详解

发表于 2018-1-14 11:38:02

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

wxml:

  1. class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位
  2. longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}"
  3. style="width: 100%; height: 300px;margin-top:30px">
复制代码

js:

  1. //获取应用实例
  2. var app = getApp()
  3. Page({
  4. data: {
  5. latitude: 0,//纬度
  6. longitude: 0,//经度
  7. speed: 0,//速度
  8. accuracy: 16,//位置精准度
  9. markers: [],
  10. covers: [],
  11. },
  12. onLoad: function () {
  13. },
  14. getlocation: function () {
  15. var markers = [{
  16. latitude: 28.211400,
  17. longitude: 112.914250,
  18. name: '喜地大厦',
  19. desc: '我的位置'
  20. }]
  21. var covers = [{
  22. latitude: 28.211400,
  23. longitude: 112.914250,
  24. iconPath: '/image/ic_position.png',
  25. rotate: 0
  26. }]
  27. this.setData({
  28. longitude: 112.914250,
  29. latitude: 28.211400,
  30. markers: markers,
  31. covers: covers,
  32. })
  33. wx.getLocation({
  34. type: 'gcj02',
  35. success: function (res) {
  36. var latitude = res.latitude
  37. var longitude = res.longitude
  38. var speed = res.speed
  39. var accuracy = res.accuracy
  40. console.log("latitude:" + latitude)
  41. console.log("longitude:" + longitude)
  42. console.log("speed:" + speed)
  43. console.log("accuracy:" + accuracy)
  44. wx.openLocation({
  45. latitude: latitude,
  46. longitude: longitude,
  47. scale: 28
  48. })
  49. }
  50. })
  51. }
  52. })
复制代码

效果图:

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



回复

使用道具 举报