GoogleMap.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <view>
  3. <div>
  4. <gmap-map :center="centers" :zoom="11" map-type-id="terrain" style="width: 100%; height: 340px">
  5. <gmap-marker @dragend="updateMaker" :key="index" v-for="(m, index) in markers" :position="m.position" :clickable="true"
  6. :draggable="true" @click="centers=m.position"></gmap-marker>
  7. </gmap-map>
  8. </div>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. data() {
  14. return {
  15. centers: {
  16. lat: '',
  17. lng: ''
  18. },
  19. markers: [{
  20. position: {
  21. lat: '',
  22. lng: ''
  23. }
  24. }],
  25. place: null,
  26. description: 'Autocomplete Example (#164)',
  27. longitude: '',
  28. latitude: '',
  29. id: 0, // 使用 marker点击事件 需要填写id
  30. title: 'map',
  31. covers: []
  32. }
  33. },
  34. onLoad: function(option) {
  35. const item = JSON.parse(decodeURIComponent(option.item));
  36. this.longitude = item.longitude;
  37. this.latitude = item.latitude;
  38. var cover = [];
  39. var cov = {};
  40. cov["latitude"] = item.latitude;
  41. cov["longitude"] = item.longitude;
  42. cov["iconPath"] = '../../static/img/map.png';
  43. cover.push(cov);
  44. cover.push(cov);
  45. this.markers[0].position = {
  46. lat: item.latitude,
  47. lng: item.longitude
  48. };
  49. this.centers={
  50. lat: item.latitude,
  51. lng: item.longitude
  52. };
  53. },
  54. methods: {
  55. setPlace(place) {
  56. this.place = place
  57. },
  58. setDescription(description) {
  59. this.description = description;
  60. },
  61. usePlace(place) {
  62. if (this.place) {
  63. var newPostion = {
  64. lat: this.place.geometry.location.lat(),
  65. lng: this.place.geometry.location.lng(),
  66. };
  67. this.center = newPostion;
  68. this.markers[0].position = newPostion;
  69. this.place = null;
  70. }
  71. },
  72. updateMaker: function(event) {
  73. console.log('updateMaker, ', event.latLng.lat());
  74. this.markers[0].position = {
  75. lat: event.latLng.lat(),
  76. lng: event.latLng.lng(),
  77. }
  78. },
  79. }
  80. }
  81. </script>
  82. <style>
  83. </style>