uniapp项⽬--实现⼩程序定位⼀、获取对⽅(企业)位置
<!-- 获取input输⼊框value可能这样写，两种选择，⼿写输⼊或者选择定位 -->
<input class="moren" name="gsdz" placeholder="请填写" :value="gsdz" />
<map
:latitude="latitude"  //在地图上的纬度
:longitude="longitude"//经度
:markers="marker" //标记点⽤于在地图上显⽰标记的位置
@tap="mark" //点击选择地点事件
:scale="scale"//缩⼩或放⼤程度
></map>
marker 为对象数组类型，⽬前我只需要企业填写信息时获取公司位置，具体需要的可查看
data() {
return {
id:0,
latitude: '',//显⽰时中⼼位置
longitude: '',
marker: [
{//标点⼀所需要的
id:0,
latitude: '',
longitude: '',
iconPath: '/static/images/zuobiao.png',    //显⽰的图标
rotate:0,  // 旋转度数
width:20,  //宽
height:20,  //⾼
title:'在哪',//标注点名
alpha:0.5,  //透明度
label:{//为标记点旁边增加标签  //因背景颜⾊H5不⽀持
content:'',//⽂本
color:'red',//⽂本颜⾊
},
callout:{//⾃定义标记点上⽅的⽓泡窗⼝点击有效
content: '',//⽂本，⽐如公司名称
color:'#ffffff',//⽂字颜⾊
fontSize:14,//⽂本⼤⼩
borderRadius:2,//边框圆⾓
bgColor:'#00c16f',//背景颜⾊
display:'ALWAYS',//常显
}
}],
scale:16//地图缩放程度
};
}
mark:function(){
let that = this;
uni.chooseLocation({
success: function (res) {
console.log(res);//可打印出来看看都有什么
that.marker[0].t = res.name;//这个就是公司/店铺名称
that.marker[0].latitude = res.latitude;//经纬度
that.marker[0].longitude = res.longitude;
that.marker[0].title = res.address;//具体地址
//以that.latitude和that.longitude为中⼼显⽰位置
that.latitude = res.latitude;
that.longitude = res.longitude;
that.gsdz =  res.address;//将位置显⽰到页⾯input框中
}
});
}
⼆、个⼈查看对⽅(企业)位置
<map
:latitude="latitude"  :longitude="longitude"
:markers="marker"
@tap="mark"
:show-location="show_flag"//定位是否以当前位置为中⼼
:enable-scroll="show_flag"//是否让个⼈可以滑动地图
:
scale="scale"
制作查询类小程序
></map>
data() {
return {
id:0,
latitude: '',
longitude: '',
show_flag: false,
marker: [{
id:0,
latitude: '',
longitude: '',
iconPath: '/static/images/zuobiao.png',    //显⽰的图标
rotate:0,  // 旋转度数
width:25,  //宽
height:25,  //⾼
title:'企业位置',//标注点名
// alpha:0.5,  //透明度
// label:{//为标记点旁边增加标签  //因背景颜⾊H5不⽀持
//  content:'许昌',//⽂本
//  color:'red',//⽂本颜⾊
// },
callout:{//⾃定义标记点上⽅的⽓泡窗⼝点击有效
content: '',//⽂本
color:'#000000',//⽂字颜⾊
fontSize:16,//⽂本⼤⼩
borderRadius:2,//边框圆⾓
bgColor: '#ffffff',//背景颜⾊
display: 'ALWAYS',//常显
padding: 10,
textAlign: 'center',
}
},
{
id:1,
latitude: '',
longitude: '',
iconPath: '/static/images/zuobiao.png',    //显⽰的图标
rotate:0,  // 旋转度数
width:20,  //宽
height:20,  //⾼
title:'个⼈位置',//标注点名
}
],
scale:15//地图缩放程度
};
}
latitude longitude address comName 分别赋值给marker[0].latitude marker[0].longitude marker[0].title marker[0].t
mark:function(){
let that = this;
//Location 获取当前位置信息
type: 'gcj02', //返回可以⽤于uni.openLocation的经纬度
success: function (res) {
//经纬度就是你此刻的位置
that.marker[1].latitude = res.latitude;
that.marker[1].longitude = res.longitude;
//uni.openLocation 查看位置传⼊的经纬度必须为number类型，否则会失败。
console.log(typeof that.latitude);
uni.openLocation({
latitude: that.latitude,
longitude: that.longitude,
// 左下⾓会出现公司名称和公司具体位置
name: that.marker[0].t,
address: that.marker[0].title,
success: function(){
console.log("success");
},
fail:function(res){
console.log(res)
}
})
}
})
}
有其他需要了解的可以查看建议⼿机版浏览。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。