目錄

前言

效果圖

提示

總代碼

分析

1.顯示自己位置的屬性

2.markers 點標記

前言

由于項目的需求，我需要從主頁面接收經(jīng)緯度，并渲染至地圖上面，同時呢，也要在該位置上顯示圖標標記點（紅色），與此同時也要顯示自己位置（藍色點），這個簡單的功能就不需要使用高德地圖或者騰訊地圖，因為uni-app官網(wǎng)就有這個功能

map組件官網(wǎng)

效果圖

提示

它會報?

<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, //經(jīng)度
          callout: { //自定義標記點上方的氣泡窗口 點擊有效
            content: arr[i].name, //文本
            color: '#ffffff', //文字顏色
            fontSize: 10, //文本大小
            borderRadius: 2, //邊框圓角
            bgColor: '#00c16f', //背景顏色
            display: 'ALWAYS', //常顯
          },
        })
      }
      this.markers = markers
      console.log(this.markers)
      console.log('首頁傳遞給地圖頁面的數(shù)據(jù)', 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是接收 主頁面?zhèn)鬟f過來的參數(shù)文章來源地址http://www.zghlxwxcb.cn/news/detail-639588.html

到了這里，關(guān)于uniapp之使用map組件顯示接收過來的經(jīng)緯度的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！