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

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

前言：小程序中想要实现个性化手绘地图需要通过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: '故宫'},],});//初始化labellabel = 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>

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

微信小程序从入坑到放弃二十二：完美兼容安卓和ios手机的底部评论框
摘要: 不管是在普通的H5页面还是在微信小程序中,底部输入框一直是一大难题,因为键盘会在某些情况下遮挡信输入框一部分!值得庆幸的是:在微信小程序中,我们可以通过监听bindfocus来获取键盘的高度, ...
微信小程序继续入坑指南
微信小程序继续入坑指南 wxml 类似于html 感觉和ejs灰常的相似数据绑定 js Page({data: {message: "hello world"} }) wxml ...
微信小程序：笑话段子手微信小程序源码自带内容采集随时有新内容
这是一款笑话段子的一款微信小程序源码内容支持采集而来,所以不需要担心内容的问题该小程序目前分三个分类,推荐,段子 ,图片安装方法, 使用微信开发者工具打开源码然后设置一个合法域名设置好了以后 ...
前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...
微信小程序从入坑到放弃二十九：一个小场景搞懂冒泡事件bindtap和catchtap的区别
摘要: 在微信小程序中,bindtap事件会产生冒泡,若不加以拦截,会一直冒泡到顶端.在某些情况下,一次点击会触发若干点击事件.为了防止冒泡,使用catchtap即可解决问题.在有全屏半透明背景的弹出 ...
微信小程序项目使用npm安装vant-weapp的正确步骤，简单易懂！！
微信小程序项目使用npm安装vant-weapp的正确步骤 1.在当前小程序项目目录 npm init -y 构建npm项目 2.运行命令 npm install vant-weapp -S --pr ...
微信小程序canvas实现简易手写签名版（uni-app）
微信小程序可以通过canvas实现手写签名的效果,本文中使用的是微信小程序Canvas 2D接口本示例中绘制的是横屏签名的效果,效果图如下: 这里我们需要调整canvas的物理宽高,默认物理宽高为3 ...
微信小程序使用 canvas 实现手写签名
在使用微信小程序开发中,有的需求场景中会需要用户手写签名.或者绘制一些路径,通常会使用 canvas 来实现这种需求在小程序的开发官方文档中我们可以查找到相关的 canvas 接口使用方法,在文档中 ...
微信小程序之图表系列——canvas绘制饼状图，带点击效果
一图胜千言,相信很多开发者都没有绕开过图表制作这个坑,在小程序中也是,当然可以用第三方echart等制图插件来做,但小程序要求代码量最大12M,还得分好几个包,一个echart插件就将近1M,要是只做 ...

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

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

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

最新文章

热门文章