可以看到我在地图的中心点插入了一个
这样的图片
首先 你需要做出一个地图组件 如果没有了解可以先观看我的文章
uni-app插入地图组件 通过经纬度控制定位
然后我们在map标签中加入markers
颜色代码如下
<template>
<view>
<map
:longitude="longitude"
:latitude="latitude"
:markers="markers"
></map>
</view>
</template>
<script>
export default {
data() {
return {
longitude: 114.010555,
latitude: 22.674074,
markers: [
{
longitude: 114.010555,
latitude: 22.674074,
iconPath: '../../static/tuoyuan.jpg',
heigth: 30,
width: 30
}
]
}
}
}
</script>
<style>
map{
width: 750rpx;
height: 750rpx;
}
</style>
markers属性是个数组 他可以同时给多个坐标位置添加图片 但首先你要在对象中给他对应的 longitude 经度 latitude 纬度
iconPath对应的就是你要插入这个坐标点的图片路径 需要注意的是 这个图片必须是在你项目里的
heigth控制图片高度 width控制图片高度
scale 可以控制地图整体大小 个人建议13 最终代码如下
<template>
<view>
<map
:longitude="longitude"
:latitude="latitude"
:markers="markers"
:scale="scale"
></map>
</view>
</template>
<script>
export default {
data() {
return {
longitude: 114.010555,
latitude: 22.674074,
scale:13,
markers: [
{
longitude: 114.010555,
latitude: 22.674074,
iconPath: '../../static/tuoyuan.jpg',
heigth: 30,
width: 30
}
]
}
}
}
</script>
<style>
map{
width: 750rpx;
height: 750rpx;
}
</style>
效果如下