开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言

因项目的需求，我需要完成 根据主页面传递过来的经纬度，接收并渲染到地图上面，再给接收过来的地址添加点图标标记点（红色），然后呢，也显示自己的位置（蓝色），第一次接触，就做个记录，

这是uniapp map组件官网（map | uni-app官网 (dcloud.net.cn)）

效果图

提示

它会报渲染层的问题，只要不影响代码运行就不要管它，这个问题呢，别问我，问我，我也不会解决

<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是接收 主页面传递过来的参数