目录
前言
效果图
提示
总代码
分析
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（）：是一种字符串的方法，用于将字符串连接在一起，它不会更改原字符串的值，返回的是一个新字符串文章来源：https://www.toymoban.com/news/detail-639588.html
3.JSON.parse(decodeURIComponent(option.item))
maplatlng是接收 主页面传递过来的参数文章来源地址https://www.toymoban.com/news/detail-639588.html
到了这里，关于uniapp之使用map组件显示接收过来的经纬度的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
