微信小程序-map地图标签的初级使用, 拥有图标,气泡,地图本身无法缩放移动需要点击跳转第三方地图平台

效果展示 内置地图map

在这里插入图片描述
主要属性设置- 看代码

<map :latitude="allPositionDate.company.latitude" 
	 :longitude="allPositionDate.company.longitude" 
	 :markers="markers"  class='mapv' 
	 :enable-scroll="false" :enable-zoom="false"
	 @tap="jumpMap(allPositionDate.company.latitude, allPositionDate.company.longitude )"
 	 >
</map>
属性名属性类型是否必填属性说明
longitudenumber中心经度
latitudenumber中心纬度
markersArray标记点就是一个一个的标记点
enable-scrollboolean是否支持滚动
enable-zoomboolean是否支持缩放
data() {
			return {
				maskShow: false, //遮罩层是否显示
				callShow: false, //电话弹窗的控制
				resHaveShow: false, //已经有简历的弹窗
				resNoneShow: false, //没有简历的弹窗
				sendResume: false, //上传简历弹窗
				//记录简历是否被选中的索引  没用循环 写6个效果
				num: null,
				currentIndex: null, //接受简历的Id
				//默认有 
				isHaveRes: true, // 
				allPositionDate: [], //主页主要内容的数据
				resumeList: [], // 主人简历列表的数据
				positionCity: [], // 投递城市的数据
				resume_id: null,  //投递简历参数简历id---在点击简历列表的时候赋值
				address_ids: [],  //投递简历参数城市id---在点击城市列表的时候变成数组,最后在提交之前变成,
				position_id: null  ,//岗位id	
				detail_id: null, // 详情页面id 用于给确定用户留言上传的时候需要传入的id
				webUrls_data: "",
				markers: [], -------------------------》设置数组
			}
		},
 /**
		   * 创建marker对象的方法 ---为什么要写一个方法, 因为可能又很多这样的小点点
		   */
		  createMarker(point) {
		    let marker = {
			  iconPath: `${this.webUrls}/image/positionDetail/map.png`,  //地图上的图标可以写网络路径
		      id: point.id || 0,
		      name: point.address || '',
		      latitude: point.latitude,
		      longitude: point.longitude,
		      width: 20,
		      height: 20,
			  callout: {
				  content: 	`${point.address}`,
				  color: "#333333",
				  fontSize: 13,
				  borderRadius: 20,
				  bgColor: "#ffffff",
				  textAlign: "center" ,
				  padding: 10,
				  display: 'ALWAYS'
			  }
		    };
		    return marker;
		  },
		  //请求数据咯、
			getPositionDate(id) {
				const _this = this
				const positionDate = sign()
				uni.request({
					url: "https://zp.xxnmkj.cn/api/Index/positionInfo",
					method: "GET",
					data: {
						time: positionDate.time,
						salt: positionDate.salt,
						checkCode: positionDate.checkCode,
						token: positionDate.token,
						tokenType: "XXC",
						id: id
					},
					success: (res) => {
						if (res.data.code !== 2000) {
							uni.showToast({
								title: '网络繁忙,请稍后重试',
								icon: "none",
								mask: true
							})
						} else {
							console.log(res.data.data)
							_this.allPositionDate = res.data.data
							_this.position_id = res.data.data.id  //岗位id
							let masker = _this.createMarker(res.data.data.company)------》赋值
							_this.markers.push(masker)
						}
					}
				})
			},
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值