uni-app:使用map组件显示接收过来的经纬度

目录

前言

效果图

提示

总代码

分析

1.显示自己位置的属性

2.markers 点标记

---

前言

由于项目的需求，我需要从主页面接收经纬度，并渲染至地图上面，同时呢，也要在该位置上显示图标标记点（红色），与此同时也要显示自己位置（蓝色点），这个简单的功能就不需要使用高德地图或者腾讯地图，因为uni-app官网就有这个功能

map组件官网

效果图

提示

它会报 

<map>: width and heigth of marker id 0 are required

 

翻译：

• 标记id为0的宽度和高度是必需的

这个是报渲染层问题，通常只要不影响代码运行就不用管它，大哥们，如果有人知道怎么解决的话，请在下面留言，因为我不会，(*^▽^*)

总代码

1.  
   <template>
2.  
   <view>
3.  
   <view class="page-body">
4.  
   <view class="page-section page-section-gap">
5.  
   <map style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude" :markers="markers"
6.  
   show-location="true">
7.  
   </map>
8.  
   </view>
9.  
   </view>
10.  
    </view>
11.  
    </template>
12.  
     
13.  
     
14.  
    <script>
15.  
    export default {
16.  
    data() {
17.  
    return {
18.  
    id: 0, // 使用 marker点击事件 需要填写id
19.  
    title: 'map',
20.  
    latitude: '',
21.  
    longitude: '',
22.  
    markers: []
23.  
    }
24.  
    },
25.  
     
26.  
    onLoad(option) {
27.  
    const maplatlng = JSON.parse(decodeURIComponent(option.item));
28.  
    this.latitude = maplatlng.stationLat
29.  
    this.longitude = maplatlng.stationLng
30.  
    let arr = [{
31.  
    id: 0,
32.  
    longitude: this.longitude,
33.  
    latitude: this.latitude,
34.  
    name: this.stationName
35.  
    }]
36.  
    let markers = []
37.  
    for (var i = 0; i < arr.length; i ) {
38.  
    markers = markers.concat({
39.  
    id: arr[i].id,
40.  
    latitude: arr[i].latitude, //纬度
41.  
    longitude: arr[i].longitude, //经度
42.  
    callout: { //自定义标记点上方的气泡窗口 点击有效
43.  
    content: arr[i].name, //文本
44.  
    color: '#ffffff', //文字颜色
45.  
    fontSize: 10, //文本大小
46.  
    borderRadius: 2, //边框圆角
47.  
    bgColor: '#00c16f', //背景颜色
48.  
    display: 'ALWAYS', //常显
49.  
    },
50.  
    })
51.  
    }
52.  
    this.markers = markers
53.  
    console.log(this.markers)
54.  
    console.log('首页传递给地图页面的数据', this.latitude, this.longitude);
55.  
    },
56.  
    methods: {}
57.  
    }
58.  
    </script>
59.  
     
60.  
    <style scoped lang="scss">
61.  
     
62.  
    </style>

分析

1.显示自己位置的属性

show-location ：默认false  可直接写  show-location="true"  或 show-location  

2.markers 点标记

 markers = markers.concat

concat（）：是一种字符串的方法，用于将字符串连接在一起，它不会更改原字符串的值，返回的是一个新字符串

3.JSON.parse(decodeURIComponent(option.item))

maplatlng是接收 主页面传递过来的参数

这篇好文章是转载于：学新通技术网