效果展示 内置地图map
主要属性设置- 看代码
<map :latitude="pany.latitude" :longitude="pany.longitude" :markers="markers" class='mapv' :enable-scroll="false" :enable-zoom="false"@tap="jumpMap(pany.latitude, pany.longitude )"></map>
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 ,//岗位iddetail_id: null, // 详情页面id 用于给确定用户留言上传的时候需要传入的idwebUrls_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 = thisconst positionDate = sign()uni.request({url: "/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 //岗位idlet masker = _this.createMarker(res.pany)------》赋值_this.markers.push(masker)}}})},
微信小程序-map地图标签的初级使用 拥有图标 气泡 地图本身无法缩放移动需要点击跳转第三方地图平台
