微信小程序--放入个性化手绘地图具体步骤（腾讯地图）

小小黑007

已于 2023-10-13 10:00:53 修改

阅读量8.6k

点赞数 7

分类专栏：微信小程序文章标签：微信小程序小程序

于 2022-07-12 14:53:49 首次发布

本文链接：https://blog.csdn.net/heavenz19/article/details/125742657

版权

微信小程序专栏收录该内容

42 篇文章 7 订阅

订阅专栏

微信小程序–放入个性化手绘地图具体步骤（腾讯地图）

前言：小程序中想要实现个性化手绘地图需要通过H5嵌入的模式进行实现。

1.首先需要一个腾讯地图的账号（微信登录即可），然后选择个性化地图进入（https://lbs.qq.com/customMap/添加链接描述），随后选择开启个性化图层按钮进入图层设计。
在这里插入图片描述

2.一般来说会有专业的UI设计来完成地图的绘画，之后会给到前端一张图片，这个时候前端可以点击‘切片创建图层’的按钮进行创建图层。
在这里插入图片描述

3.开始进行图片和地图坐标合并，点击新建，进入设计页面。搜索需要绘图的具体位置，进行图片的上传，通过一定的拉伸等操作使图片的坐标和地图的坐标尽量重合。设置适当的层级即可点击生成瓦片的按钮。
在这里插入图片描述

4.生成完成后如没有问题，可以进行审核，大概是1-2天，或者有时候是几个小时。审核成功后，会有一个唯一的地图id,记录下来，接下来就要开始写代码了。

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>自定义栅格图层1</title>
	</head>

	<style type="text/css">
		html,
		body {
			height: 100%;
			margin: 0px;
			padding: 0px;
		}

		#mapContainer {
			width: 100%;
			height: 100%;
		}

		img {
			display: none !important;
		}

		.logo-text {
			display: none !important;
		}
	</style>

	<body>

		<div id="mapContainer"></div>
		<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=xxxxxxxxxxxxxxxx">
		</script>
		<script>
			let ne = new TMap.LatLng(39.92555, 116.408127);
			let sw = new TMap.LatLng(39.911225, 116.389223);
			let center = new TMap.LatLng(39.9180971495937, 116.396955410004); //设置中心点坐标
			window.onload = init;

			function init() {
				//初始化地图
				var map = new TMap.Map('mapContainer', {
					center: center,
					zoom: 15,
					minZoom: 15,
					maxZoom: 17,
					showControl: false,
					viewMode: '2D',
					boundary: new TMap.LatLngBounds(sw, ne), //（northeast：东北方向的点，southwest：西南方向的点）
					baseMap: { //底图设置（参数为：VectorBaseMap对象）
						type: 'vector', //类型：失量底图
						features: ['base', 'building2d']
						//仅渲染：道路及底面(base) + 2d建筑物(building2d)，以达到隐藏文字的效果
					},
				});

				TMap.ImageTileLayer.createCustomLayer({
					layerId: '审核完成后的id',
					map: map
				}).then(customLayer => {
					if (customLayer) {
						// 成功创建个性化图层
						console.log('done');
					} else {
						// 创建失败，请查看控制台错误信息
						console.log('fail');
					}
				})


				var marker = new TMap.MultiMarker({
					map: map,
					styles: {
						default: new TMap.MarkerStyle({
							'width': 34,
							'height': 42,
							'anchor': {
								x: 17,
								y: 21,
							},
							'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png',
						}),
					},
					geometries: [
						// 点标记数据数组
						{
							// 标记位置(纬度，经度，高度)
							position: center,
							id: 'marker',
							content: '故宫'
						},
					],
				});

				//初始化label
				label = new TMap.MultiLabel({
					id: 'label-layer',
					map: map,
					styles: {
						'label': new TMap.LabelStyle({
							'color': '#333', //颜色属性
							'size': 20, //文字大小属性
							'offset': {
								x: 0,
								y: 0
							}, //文字偏移属性单位为像素
							'angle': 0, //文字旋转属性
							'alignment': 'center', //文字水平对齐属性
							'verticalAlignment': 'middle' //文字垂直对齐属性
						})
					},
					geometries: [{
						'id': 'label', //点图形数据的标志信息
						'styleId': 'label', //样式id
						'position': center, //标注点位置
						'content': '腾讯北京总部', //标注文本
						'properties': { //标注点的属性数据
							'title': 'label'
						}
					}]
				});
			}
			
		</script>
	</body>

</html>

5.把写好的H5放到服务器上面，可进行访问后，再嵌入小程序需要展示的页面中。(小程序公众平台需要进行域名配置)

<web-view src="http://xxxxxxxxxxxxxxxx"></web-view>

小小黑007

关注

7
点赞
踩
51

收藏

觉得还不错? 一键收藏
5
评论
微信小程序--放入个性化手绘地图具体步骤（腾讯地图）

1.首先需要一个腾讯地图的账号（微信登录即可），然后选择个性化地图进入（https://lbs.qq.com/customMap/添加链接描述），随后选择开启个性化图层按钮进入图层设计。2.一般来说会有专业的UI设计来完成地图的绘画，之后会给到前端一张图片，这个时候前端可以点击‘切片创建图层’的按钮进行创建图层。3.开始进行图片和地图坐标合并，点击新建，进入设计页面。搜索需要绘图的具体位置，进行图片的上传，通过一定的拉伸等操作使图片的坐标和地图的坐标尽量重合。设置适当的层级即可点击生成瓦片的按钮。
复制链接

扫一扫