uniapp之使用map组件显示接收过来的经纬度

目录

前言

效果图

提示

总代码

分析

1.显示自己位置的属性

2.markers 点标记

---

前言

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

map组件官网

效果图

提示

它会报 

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

 

翻译：

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

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

总代码

<template>
  <view>
    <view class="page-body">
      <view class="page-section page-section-gap">
        <map style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude" :markers="markers"
          show-location="true">
        </map>
      </view>
    </view>
  </view>
</template>


<script>
  export default {
    data() {
      return {
        id: 0, // 使用 marker点击事件 需要填写id
        title: 'map',
        latitude: '',
        longitude: '',
        markers: []
      }
    },

    onLoad(option) {
      const maplatlng = JSON.parse(decodeURIComponent(option.item));
      this.latitude = maplatlng.stationLat
      this.longitude = maplatlng.stationLng
      let arr = [{
        id: 0,
        longitude: this.longitude,
        latitude: this.latitude,
        name: this.stationName
      }]
      let markers = []
      for (var i = 0; i < arr.length; i++) {
        markers = markers.concat({
          id: arr[i].id,
          latitude: arr[i].latitude, //纬度
          longitude: arr[i].longitude, //经度
          callout: { //自定义标记点上方的气泡窗口 点击有效
            content: arr[i].name, //文本
            color: '#ffffff', //文字颜色
            fontSize: 10, //文本大小
            borderRadius: 2, //边框圆角
            bgColor: '#00c16f', //背景颜色
            display: 'ALWAYS', //常显
          },
        })
      }
      this.markers = markers
      console.log(this.markers)
      console.log('首页传递给地图页面的数据', this.latitude, this.longitude);
    },
    methods: {}
  }
</script>

<style scoped lang="scss">

</style>

分析

1.显示自己位置的属性

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

2.markers 点标记

 markers = markers.concat

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

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

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