1、访问腾讯地图开发控制台可找到个性化图层界面
https://lbs.qq.com/dev/console/customLayer/create
image.png
2、根据提示，上传你的手绘图图片，并设置图片坐标范围等信息
image.png
3、等待审核完成后，在图层管理中绑定图层和开发密钥
image.png
4、加载示例代码如下
<!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>创建地图</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=QSZBZ-KYVC6-GRLSB-M4ENX-N2CL5-6TB2U"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
function initMap() {
var center = new TMap.LatLng(30.07743,120.689695);
//初始化地图
var map = new TMap.Map("container", {
rotation: 20,//设置地图旋转角度
pitch:30, //设置俯仰角度（0~45）
zoom:12,//设置地图缩放级别
center: center//设置地图中心点坐标
});
TMap.ImageTileLayer.createCustomLayer({
layerId: '618334571202',
map: map
}).then(customLayer => {
if (customLayer) {
// 成功创建个性化图层
console.log('done');
} else {
// 创建失败，请查看控制台错误信息
console.log('fail');
}
});
}
</script>
</body>
</html>
image.png
网友评论