uni-app地图组件 控制在指定坐标位置插入一个图片

可以看到我在地图的中心点插入了一个

这样的图片
首先 你需要做出一个地图组件 如果没有了解可以先观看我的文章
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>

效果如下