map.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <view class="">
  3. <map style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers"
  4. @tap="clickMap">
  5. <cover-view class="address_box">点击地图选择位置</cover-view>
  6. </map>
  7. <cover-view class="sure" @click="surePosi">确定</cover-view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. data() {
  13. return {
  14. latitude: 39.909,
  15. longitude: 116.39742,
  16. covers: [{
  17. latitude: 39.909,
  18. longitude: 116.39742,
  19. }]
  20. }
  21. },
  22. onLoad(options) {
  23. console.log(options)
  24. this.latitude = options.lat
  25. this.longitude = options.lng
  26. this.covers = [{
  27. latitude: options.lat,
  28. longitude: options.lng,
  29. }]
  30. },
  31. methods: {
  32. clickMap(e) {
  33. console.log(e, 'ppp')
  34. this.covers = [{
  35. latitude: e.detail.latitude,
  36. longitude: e.detail.longitude,
  37. }]
  38. this.latitude = e.detail.latitude
  39. this.longitude = e.detail.longitude
  40. },
  41. surePosi() {
  42. console.log('ppppppppppppppppp')
  43. uni.reLaunch({
  44. url:'./index?lat=' + this.latitude + '&lng=' + this.longitude
  45. })
  46. }
  47. }
  48. }
  49. </script>
  50. <style lang="scss" scoped>
  51. .address_box {
  52. height: 35px;
  53. line-height: 35px;
  54. padding-left: 15px;
  55. color: #fff;
  56. background-color: #ff6a14;
  57. }
  58. .sure {
  59. height: 35px;
  60. width: 30%;
  61. text-align: center;
  62. line-height: 35px;
  63. bottom: 40px;
  64. border-radius: 8px;
  65. left: 35%;
  66. position: fixed;
  67. color: #fff;
  68. z-index: 9999;
  69. background-color: #ff6a14;
  70. }
  71. </style>