uniapp 踩坑Map组件

由于本人不爱看文档 遇到问题先百度的原则,还是踩了不少坑。先简单记载第一步在这里插入图片描述
做出一个如图所示的效果 代码如下:

                <map style="width: 100%; height:94vh;" :latitude="latitude" :longitude="longitude" :markers="marker"
				:scale='scale' :controls="controls" :circles="circles" :polyline="polyline">
                </map>


	    data() {
	        return {
				// id:0, // 使用 marker点击事件 需要填写id
	            title: 'map',//地图标题
	            latitude: 39.909,//经度39.909
	            longitude: 116.39742,//纬度116.39742
				// scale:5,//最小数,缩放范围最大,可见程度最大
				scale:18,最大数,缩放范围最小,可见程度最小
				// marker:[]
	            marker: [{
					// id:0,
	                latitude: 39.909,//经度
	                longitude: 116.39742,//纬度
	                iconPath: '../../static/carSort/icons/icon_car.png',//显示的图标
			      rotate:0,   // 旋转度数
			      width:20,   //宽
			      height:20,   //高
			      title:'你在哪了',//标注点名
			      alpha:0.5,   //透明
	            },],

	        }
	    },

如果想要自定义气泡窗口的效果
在这里插入图片描述
用来记载一下效果
在这里插入图片描述

接下来是控件

放在data里面的
			  controls:[{//在地图上显示控件,控件不随着地图移动
				     id:1,//控件id
				     iconPath:'../../static/carSort/icons/icon_car.png',//显示的图标    
				     position:{//控件在地图的位置
				        left:15,
				        top:15,
				        width:50,
				        height:50
				      },    
				  }],

在这里插入图片描述
在data里面放的

				  controls:[{//在地图上显示控件,控件不随着地图移动
				     id:1,//控件id
				     iconPath:'../../static/carSort/icons/icon_car.png',//显示的图标    
				     position:{//控件在地图的位置
				        left:15,
				        top:15,
				        width:50,
				        height:50
				      },    
				  }],
				  circles:[{//在地图上显示圆
				     latitude: 40.013,
				     longitude: 118.685,
				     fillColor:"#999999",//填充颜色
				     color:"#0016ca",//描边的颜色
				     radius:20,//半径
				     strokeWidth:2//描边的宽度
				   }],
				  polyline:[{//指定一系列坐标点,从数组第一项连线至最后一项
				    points:[
				         {latitude: 40.013305,longitude: 118.685713},
				         {latitude: 40.013,longitude: 118.685},
				    ],
				    color:"#0000AA",//线的颜色
				    width:2,//线的宽度
				    dottedLine:true,//是否虚线
				    arrowLine:true,    //带箭头的线 开发者工具暂不支持该属性
				  }],

注意:我们公司设计的当时说想做成那种地图上面带有div的
就是说地图上面可以显示门店位置。门店名称的那种,我当时用定位在网页上实现的,但是一到手机上运行的时候,发现显示不出来,后来我仔细看了一下,那个map组件享有最高的优先级,

你用定位之类,根本就实现不了,后来我发现了一个叫 和 他是可以覆盖在原生组件上的文本视图 但是也有注意点它不支持的css:

position: fixed
opacity
overflow
padding
linebreak
white-space
另外还有: 在APP端它不支持嵌套其他组件,也不支持本身组件的嵌套,app现在只可以不该原生组件video和map, 一定要注意

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值