map-search.nvue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <view class="content">
  3. <map class="map" ref="dcmap" :markers="markers" @tap="selectPoint"></map>
  4. <scroll-view class="scrollview" scroll-y="true">
  5. <button class="button" @click="reverseGeocode">reverseGeocode</button>
  6. <button class="button" @click="poiSearchNearBy">poiSearchNearBy</button>
  7. </scroll-view>
  8. </view>
  9. </template>
  10. <script>
  11. // 116.397477,39.908692
  12. let mapSearch = weex.requireModule('mapSearch')
  13. export default {
  14. data() {
  15. return {
  16. markers: [{
  17. id: '1',
  18. latitude: 39.9086920000,
  19. longitude: 116.3974770000,
  20. title: '天安门',
  21. zIndex: '1',
  22. iconPath: '/static/gps.png',
  23. width: 20,
  24. height: 20,
  25. anchor: {
  26. x: 0.5,
  27. y: 1
  28. },
  29. callout: {
  30. content: '首都北京\n天安门',
  31. color: '#00BFFF',
  32. fontSize: 12,
  33. borderRadius: 2,
  34. borderWidth: 0,
  35. borderColor: '#333300',
  36. bgColor: '#CCFF11',
  37. padding: '1',
  38. display: 'ALWAYS'
  39. }
  40. }]
  41. }
  42. },
  43. methods: {
  44. selectPoint(e) {
  45. console.log(e);
  46. },
  47. reverseGeocode() {
  48. var point = this.markers[0]
  49. mapSearch.reverseGeocode({
  50. point: {
  51. latitude: point.latitude,
  52. longitude: point.longitude
  53. }
  54. }, ret => {
  55. console.log(JSON.stringify(ret));
  56. uni.showModal({
  57. content: JSON.stringify(ret)
  58. })
  59. })
  60. },
  61. poiSearchNearBy() {
  62. var point = this.markers[0]
  63. mapSearch.poiSearchNearBy({
  64. point: {
  65. latitude: point.latitude,
  66. longitude: point.longitude
  67. },
  68. key: '停车场',
  69. radius: 1000
  70. }, ret => {
  71. console.log(ret);
  72. uni.showModal({
  73. content: JSON.stringify(ret)
  74. })
  75. })
  76. }
  77. }
  78. }
  79. </script>
  80. <style>
  81. .content {
  82. flex: 1;
  83. }
  84. .map {
  85. width: 750rpx;
  86. height: 500rpx;
  87. background-color: black;
  88. }
  89. .scrollview {
  90. flex: 1;
  91. }
  92. .button {
  93. margin-top: 30rpx;
  94. margin-bottom: 20rpx;
  95. }
  96. </style>