文章目录
写在前面
这是一篇很长的文章，可以根据目录跳过。 微信小程序中的地图使用腾讯地图的cast割版本，该版本与JS版本的界面相距甚远。当前，官方网站提供的接口和参数很少，功能有限。但是仍然有像我这样的短吻鳄，他们想尝试新事物并帮助您填补一些空白。本文主要针对基础知识相对较弱的开发人员，因此大人物可以忽略它〜
欢迎其他评论。
开发工具
微信开发人员工具就足够了。当然，您也可以使用HBuilder X开发uni-app并将其编译为微信小程序。最后的调试必须在微信 developer工具中执行。如图所示，左侧是微信开发人员工具，右侧是HBuilder X。
版本
微信开发工具2.8.0（当前是最高版本）。由于版本变化很快，因此建议使用最新版本。旧版本具有许多不受支持的功能。可以在详细信息中设置。
怎么打电话？
例如，如果将地图组件添加到索引页面，则只需添加一个，然后我们需要向该组件添加一些属性以丰富地图。
几个问题1.地图组件的大小和位置
如果未设置地图组件的长度和宽度，则默认为小地图，如图所示
我们在地图组件上添加宽度
.map{width:100%;}
通过这种方式，地图的宽度可以填满整个屏幕。根据逻辑，将height：100％添加到整个屏幕应该会填满，但实际上并非如此。地图的高度将变为0。这是因为父容器没有height属性，它会根据子组件的高度自动调整其高度。该组件的特殊功能是必须预先定义其高度，例如500px之类的固定值。
设置固定值通常不能满足我们的需求。最基本的情况是我们需要一张覆盖整个页面的地图。目前，我们只需要将height属性设置为地图的父容器视图即可。
//map父容器的class.container{height:100%;width:100%;}//map的class.map{height:100%;width:100%;}
这样，我们可以获得以下地图
一种更常见的情况是，页面不仅是地图，而且是其他功能组件，并且结构通常是上下的。然后，我们需要地图填充更多空间。在这种情况下，我们该如何编写样式？
例如，地图上有两个按钮，首先使用以上样式查看效果，如图所示
乍看之下似乎没有问题，但是我们可以看到地图的高度为712。实际上，其父容器（即.container）的高度也为712。换句话说，地图的一部分实际上在屏幕的底部。我们可以滑动顶部的按钮以在屏幕底部查看地图，或者您可以通过地图组件右下角的腾讯地图徽标来判断地图组件的下限。
那我该怎么办？
方法1：使用百分比
.brother{height:30%;}.map{height:70%;}
这看起来不错，但是有很多缺陷。一、我们需要此页面与所有手机兼容。百分比界面不美观，难以控制。二、在手机上进行调试后发现，通过此方法获得的.container的高度大于屏幕的高度（约数十个像素），这意味着您仍然可以滚动。这不是我们想要看到的。
方法一的补救方法是添加overflow-y：hidden; .container的属性。这基本上是可用的。
方法2：使用弹性版式
flex布局是小程序官方推荐的布局方法，它可以支持许多布局形式。那你怎么办呢？
我们这样写：
.container{width:100%;height:100%;overflow-y:hidden;display:flex;flex-direction:column;//列布局}.brother{}.map{flex:1;width:100%;}
效果如图所示。我们可以看到地图的高度已经是正确的值，同时确保地图上兄弟组件的高度是自适应的。 flex：1的意思是自动填充剩余空间。如果还在.brother上添加了flex：1，则其高度各为一半。
2.将控件添加到地图
首先，我想说明一下以下地图控件的含义是覆盖地图容器，并且可以随地图容器位置的更改而更改。
我们在官方网站上注意到了这样的消息
换句话说，控件应使用封面视图组件编写。那怎么写呢？格式如下
应该注意，封面视图，按钮和封面图像这三个组件只能嵌套在封面视图组件中。
实际上，我测试了地图中仅使用视图，按钮和文本组件。看来它们可以正常使用，因此这里仅是建议使用Cover-view。
我们可以制作出具有这样效果的控件：
定位可以是绝对的，这是相对于父容器（即地图）的。如果要相对于屏幕进行固定，则可以使用固定。
具体代码如下：
3.地图属性
地图中的一些基本元素，例如比例尺和指南针。当前，这些工具的位置是固定的，无法设置。指南针位于左上角，刻度尺位于左下角。请注意，如果以下功能对您自己的计算机有不同的影响，则开发工具的版本可能会有所不同。建议使用最新版本。此外，指南针，刻度尺等对于开发工具中的调试无效，需要在实际机器中进行预览或调试。
地图上没有尽可能多的控件，元素和功能。最好精简实用！
3. 1个指南针
（可选）填写地图组件并添加属性show-compass（默认情况下不显示）。当地图向下或旋转时，指南针将自动显示。单击指南针将返回到垂直和真正的北状态。
3. 2比例尺
（可选）添加显示比例，该比例将自动显示在左下角。在官方文本中，暂时不支持2.8.0，但实际上，当我在真实机器中调试时，会出现比例尺
3. 3显示方向的当前锚点
（可选）添加show-location，自1. 0.0开始支持，因此非常稳定
3. 4设置地图的初始中心位置
经度和纬度这两个属性是必需的。纬度和经度位于gcj02坐标系（国家测量坐标系）中。 wgs84的纬度和经度已加密。通用电子地图将支持此坐标系的坐标转换。
3. 5设置地图比例尺
可选的小数位数默认值为16，值的范围是3-20。
3. 6设置地图旋转角度
可选旋转，范围为0〜360，即地图真北与设备y轴角度之间的夹角，仅在允许旋转时有效
3. 7设置地图倾斜角度
可选的倾斜度，倾斜角度，范围为0到40，围绕z轴的倾斜角度，仅当它允许顶视图时才有效
3. 8允许3D块
可选的enable-3D。同一官方文本说，暂时不支持该文本。实际上，这已经是可能的。缩放级别足够大，可以看到效果。
3. 9允许向下看
选择启用俯瞰并用两根手指向下滑动
3. 10允许缩放
可选的启用缩放（默认启用）
3. 11允许拖动
可选的启用滚动，默认情况下启用
3. 12允许旋转
可选的enable-rotate
3. 13打开卫星图像
可选的启用卫星功能
3. 14开启实时路况
可选的启用流量
3. 15显示点，线和面
可选点由标记表示。标记是标记的数组。每个标记都可以定义诸如坐标，id，标题和标签之类的属性，可以根据用户需要进行设置。
线是一条多段线，由一组点组成，默认情况下不首尾相连。您可以设置线条样式。
有两种面，一种是圆，另一种是多边形。同样，您可以绘制多个圆和多个面。
3. 16视野中包含坐标点
可选的包含点，点数组是必需的。
3. 17使用个性化的地图样式
有两个参数，一个是子项，另一个是图层样式。有关特定的配置，请参阅本文结尾处的链接“ 微信小程序-个人地图使用指南”。一个项目对应一个子项，并且一个子项可以具有多种样式。图层样式是样式的序列号，从1开始。
3. 18个监视功能
提供了7种监视功能，如下表所示
何时触发函数名称？
bindtap
点击地图
bindmarkertap
点击标记的点
bindcontroltap
单击控件（由于控件属性已弃用，此功能可能也无效）
bindcallouttap
点击气泡
bindupdated
地图渲染更新完成
bindregionchange
视野改变
bindpoitap
点击地图poi
4.使用插件
一个小程序最多可以使用5个插件，其使用过程如下：
转到微信公共平台=“设置=”第三方设置-“插件管理=”添加插件搜索插件名称，例如可用于路径规划的腾讯插件“腾讯定位服务路线规划” = “查看详细信息，请单击。要添加插件，请单击开发文档并根据访问准则使用它。5.Map API
小程序提供了一些用于地图开发的API。让我教你如何使用API。
首先向地图组件添加一个id，例如mapid
然后在页面的onReady事件中，创建地图实例mapcontext：
const mapcontext = wx.createMapContext("mapid");
接下来，您可以根据地图实例的功能进行一些操作。
获取当前地图中心的纬度和经度（gcj02）
mapcontetxt.getCenterLocatioin({});
获取当前地图的视野
mapcontext.getRegion({});
获取当前地图的缩放级别
mapcontext.getScale({});
让视野包含一组给定的点
mapcontext.includePoints({});
将地图的中心点移动到指定位置，并从2.8.0开始支持，用于移动到锚点
mapcontext.moveToLocation({});
平底锅标记
mapcontext.translateMarker({});
注意：
由于绑定到地图组件的比例尺当前无法根据地图缩放事件自动更新其自身的比例尺，因此有必要侦听regionchange事件，然后手动更新地图的比例尺属性。
当前，我遇到了一个错误。 getScale（）返回的比例尺是一个整数（在Android上测试过，据说ios系统返回一个十进制），当更新地图比例尺时会导致两次缩放。目前，这是微信小程序中尚未解决的错误。
写在最后
这些是当前地图开发中遇到的一些问题和知识点。将来我们将继续增加新的问题。欢迎提出建议，谢谢！
参考网站
微信小程序地图组件
微信小程序 Map API
微信小程序-使用个性化地图的指南