<template>
<view>
<cu-custom :bgColor="NavBarColor" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">定位</block>
</cu-custom>
<map
style="width: 100%; height:500px;"
:latitude="latitude"
:longitude="longitude"
:markers="marker"
:scale="scale"
>
</map>
</view>
</template>
<script>
export default {
data() {
return {
NavBarColor:this.NavBarColor,
id:0, // 使用 marker点击事件 需要填写id
title: 'map',
latitude: 40.009704, //纬度
longitude: 116.374999, //经度
marker: [{
id:0,
latitude: 40.009704,//纬度
longitude: 116.374999,//经度
iconPath: '/static/location.png', //显示的图标
rotate:0, // 旋转度数
width:20, //宽
height:20, //高
title:'你在哪了',//标注点名
alpha:0.5, //透明度
/* label:{//为标记点旁边增加标签 //因背景颜色H5不支持
content:'北京国炬公司',//文本
color:'red',//文本颜色
fontSize:24,//文字大小
x:5,//label的坐标,原点是 marker 对应的经纬度
y:1,//label的坐标,原点是 marker 对应的经纬度
borderWidth:12,//边框宽度
borderColor:'pink',//边框颜色
borderRadius:20,//边框圆角
bgColor:'black',//背景色
padding:5,//文本边缘留白
textAlign:'right'//文本对齐方式。
}, */
callout:{//自定义标记点上方的气泡窗口 点击有效
content:'北京国炬公司',//文本
color:'#ffffff',//文字颜色
fontSize:14,//文本大小
borderRadius:2,//边框圆角
bgColor:'#00c16f',//背景颜色
display:'ALWAYS'//常显
}
// anchor:{//经纬度在标注图标的锚点,默认底边中点
// x:0, 原点为给出的经纬度
// y:0,
// }
}],
scale:16,//地图缩放程度
controls:[{//在地图上显示控件,控件不随着地图移动
id:1,//控件id
iconPath:'/static/login3.png',//显示的图标
clickable:true,
position:{//控件在地图的位置
left:15,
top:15,
width:50,
height:50
},
}],
circles:[{//在地图上显示圆
latitude: 40.009704,
longitude: 116.374999,
radius:50,//半径
fillColor:"#ffffffAA",//填充颜色
color:"#55aaffAA",//描边的颜色
strokeWidth:1//描边的宽度
}],
/* polyline:[{//指定一系列坐标点,从数组第一项连线至最后一项
points:[
{latitude: 40.009153,longitude: 116.374935},
{latitude: 40.009704,longitude: 116.374999},
],
color:"#0000AA",//线的颜色
width:2,//线的宽度
dottedLine:true,//是否虚线
arrowLine:true, //带箭头的线 开发者工具暂不支持该属性
}], */
}
},
onLoad() {
this.getLocation()
},
methods: {
getLocation(){
uni.getLocation({
type: 'gcj02',
success: function (res) {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
},
fail: function (res) {
console.log('当前位置的经度');
}
});
}
}
}
</script>
<style>
</style>
uniapp 实现定位功能
最新推荐文章于 2024-06-11 09:22:26 发布