摘引自：https://www.cnblogs.com/cyapi/p/14561272.html
一、获取对方(企业)位置
地图组件用于展示地图，而定位API只是获取坐标，请勿混淆两者。
使用uniapp的map组件(仅展示地图)
<!-- 获取input输入框value可能这样写,两种选择，手写输入或者选择定位 -->
<input class="moren" name="gsdz" placeholder="请填写" :value="gsdz" />
<map style=" 100%;height: 150px;"
:latitude="latitude" //在地图上的纬度
:longitude="longitude"//经度
:markers="marker" //标记点用于在地图上显示标记的位置
@tap="mark" //点击选择地点事件
:scale="scale"//缩小或放大程度
></map>
marker 为对象数组类型，目前我只需要企业填写信息时获取公司位置，具体需要的可查看 uniapp文档
data() {
return {
id:0,
latitude: '',//显示时中心位置
longitude: '',
marker: [
{//标点一所需要的
id:0,
latitude: '',
longitude: '',
iconPath: '/static/images/zuobiao.png', //显示的图标
rotate:0, // 旋转度数
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//地图缩放程度
};
}
点击map 时触发mark方法，进入地图，uni.chooseLocation选择位置
mark:function(){
let that = this;
uni.chooseLocation({
success: function (res) {
console.log(res);//可打印出来看看都有什么
that.marker[0].callout.content = 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框中
}
});
}
保存，OVER！
二、个人查看对方(企业)位置
判断数据库中有没有存储对方(企业)的 位置，然后显示Map
<map style=" 100%;height: 200px;"
:latitude="latitude" :longitude="longitude"
:markers="marker"
@tap="mark"
:show-location="show_flag"//定位是否以当前位置为中心
:enable-scroll="show_flag"//是否让个人可以滑动地图
:scale="scale"
></map>
与第一点获取位置不一样的就是marker多了一组数据用来存储当前位置信息
data() {
return {
id:0,
latitude: '',
longitude: '',
show_flag: false,
marker: [{
id:0,
latitude: '',
longitude: '',
iconPath: '/static/images/zuobiao.png', //显示的图标
rotate:0, // 旋转度数
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, // 旋转度数
20, //宽
height:20, //高
title:'个人位置',//标注点名
}
],
scale:15//地图缩放程度
};
}
建议写在onLoad 或者onShow： 向后台请求数据，得到 企业的位置信息
latitudelongitudeaddress和comName分别赋值给marker[0].latitudemarker[0].longitudemarker[0].title和marker[0].callout.content。这时marker 第一个标点就出来了， 点击 mark 事件 进入查看
mark:function(){
let that = this;
//uni.getLocation 获取当前位置信息
uni.getLocation({
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].callout.content,
address: that.marker[0].title,
success: function(){
console.log("success");
},
fail:function(res){
console.log(res)
}
})
}
})
}
查看位置OVER！ uniapp位置API
有其他需要了解的可以查看 官方demo文档 建议手机版浏览。