mapToPage.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <view>
  3. <view class="title">
  4. <navbar :config="config"></navbar>
  5. </view>
  6. <map id="map1" :scale="1" ref="map1" style="width: 100%; height: calc(100vh - 44px);" :latitude="latitude" :longitude="longitude" :markers="markers" :enable-zoom="true"></map>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. config: {
  14. back: true, //false是tolbar页面 是则不写
  15. title: '加入我们-地图',
  16. color: '#1A1A1A',
  17. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  18. backgroundColor: [1, '#ffffff'],
  19. statusBarFontColor: '#FFFFFF'
  20. },
  21. latitude: null,
  22. longitude: null,
  23. mainmap: null,
  24. markers: [],
  25. list:[],
  26. imgUrl: this.$mConfig.staticUrl
  27. };
  28. },
  29. computed: {},
  30. watch: {
  31. list(n) {
  32. if (n) {
  33. this.getMap();
  34. }
  35. }
  36. },
  37. created() {
  38. this.mainmap = uni.createMapContext('map1', this);
  39. },
  40. onLoad(option) {
  41. this.list=JSON.parse(option.list);
  42. },
  43. methods: {
  44. getMap() {
  45. let that = this
  46. this.longitude = this.list[0].tx_longitude;
  47. this.latitude = this.list[0].tx_latitude;
  48. let markers = [];
  49. this.list.forEach((val, index) => {
  50. markers.push({
  51. id: index,
  52. latitude: Number(val.tx_latitude),
  53. longitude: Number(val.tx_longitude),
  54. iconPath: that.imgUrl+'/map.png',
  55. width: 20,
  56. height: 20
  57. });
  58. });
  59. this.markers = markers;
  60. }
  61. }
  62. };
  63. </script>
  64. <style></style>