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>

Logo

前往低代码交流专区

更多推荐