uniapp的map组件
uni-app 地图使用的是腾讯地图注:中间不能有多个并列,不然编译不通过。vue模板只能有一个根目录<template><view><map style="width: 100%; height: 560px;" :controls="controls" :circles="circles" :polyline='polyline' :scale="scale":l
·
uni-app 地图使用的是腾讯地图
注:中间不能有多个并列,不然编译不通过。
vue模板只能有一个根目录
<template>
<view>
<map style="width: 100%; height: 560px;" :controls="controls" :circles="circles" :polyline='polyline' :scale="scale"
:latitude="latitude" :longitude="longitude" :markers="covers">
</map>
</view>
</template>
<script>
export default {
data() {
return {
title: 'map',
latitude: 39.909,
longitude: 116.39742,
covers: [{
latitude: 39.909, //纬度
longitude: 116.39742, //经度
iconPath: '../../static/img/vehicle/icon_navigation@2x.png', //显示的图标
title: '啦啦啦', //标注点名
label: { //为标记点旁边增加标签
content: '文本', //文本
color: '#F76350', //文本颜色
anchorX: 0, //label的坐标,原点是 marker 对应的经纬度
anchorY: -80, //label的坐标,原点是 marker 对应的经纬度
bgColor: '#fff', //背景色
padding: 5, //文本边缘留白
borderWidth: 1, //边框宽度
borderColor: '#D84C29', //边框颜色
textAlign: 'right' //文本对齐方式。
},
// callout: { //自定义标记点上方的气泡窗口 点击有效
// content: '地点1',
// color: '#F76350',
// fontSize: 12,
// borderRadius: 5,
// },
}, {
latitude: 39.90,
longitude: 116.39,
iconPath: '../../static/img/vehicle/button_#2@2x.png',
title: '我是卖报的小行家',
x: 39.90,
y: 116.399,
label: {
content: '文本2',
color: '#F76350',
bgColor: '#fff',
padding: 5,
borderRadius: 4,
},
// callout: {
// content: '地点2',
// color: '#F76350',
// fontSize: 12
// }
}],
scale: 15, //地图层级
// controls: [{ //在地图上显示控件,控件不随着地图移动
// id: 1, //控件id
// iconPath: '../../static/img/vehicle/icon_location@2x.png', //显示的图标
// position: { //控件在地图的位置
// left: 15,
// top: 15,
// width: 50,
// height: 50
// },
// }],
// circles: [{ //在地图上显示圆
// latitude: 39.90,
// longitude: 116.39,
// fillColor: "#FFC41F", //填充颜色
// color: "#12A1DD", //描边的颜色
// radius: 500, //半径
// strokeWidth: 2 //描边的宽度
// }],
// polyline: [{ //指定一系列坐标点,从数组第一项连线至最后一项
// points: [{
// latitude: 39.909,
// longitude: 116.39742
// },
// {
// latitude: 39.90,
// longitude: 116.39
// },
// ],
// color: "#0000AA", //线的颜色
// width: 2, //线的宽度
// dottedLine: true, //是否虚线
// arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
// }],
};
},
onLoad() {
uni.getLocation({ //获取当前的位置坐标
type: 'wgs84',
success: function(res) {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
}
});
// uni.chooseLocation({
// success: function (res) {
// console.log('位置名称:' + res.name);
// console.log('详细地址:' + res.address);
// console.log('纬度:' + res.latitude);
// console.log('经度:' + res.longitude);
// }
// });
}
}
</script>
<style>
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)