企业官网建设流程全解析

一、一个把"地图三件套"串起来的案例
地图能力是小程序里最贴近生活的一类功能：找附近门店、打车、外卖定位、签到打卡，背后都离不开地图组件和定位接口。案例 4.9 的巧妙之处在于它一次性把三件事串在了一条完整的链路上：先用 map 组件把给定经纬度的地图画出来，再用选择位置的接口让用户在地图上挑一个地点，最后用打开位置的接口调起微信内置地图去做导航、打车这些后续动作。三个环节分别对应"看地图"“选地点”“用地点”，逻辑上层层递进，做一遍就能理解小程序地图能力的基本盘。
案例的界面并不复杂：一个卡片盒子里放着标题、一块地图和两个按钮。初始状态下，地图以预先设定好的经纬度为中心，上面插着两个标记点，其中一个带着"我的位置"的文字标签。点击"选择位置"会进入一个可以搜索、点选的地图选点页面，选完点"完成"后，地图中心会移动到所选位置；点击"打开位置"则会调起微信内置的地图页，下面还提供"导航"和"打车"的入口。
二、先解决"能不能用"的问题：权限与接口声明
这个案例和前一个案例最大的不同，是它动用了涉及用户隐私的系统能力。小程序的规矩是：凡是要读取用户位置，必须先声明、先申请、后使用。具体要做两层配置。
第一层是接口白名单，也就是在全局配置文件里明确列出本小程序要调用哪些隐私接口。案例用到了两个：获取当前位置的接口和打开地图选择位置的接口。第二层是权限说明，要声明用户位置权限，并附上一句用途描述——这句话会出现在授权弹窗里，告诉用户"你的位置信息将用于小程序位置接口的效果展示"。这两项配好之后，开发调试阶段就能正常弹窗授权了。
课件里还专门提醒了一个上线才需要注意的坑：如果小程序要发布，必须在管理后台通过类目审核，并在接口设置里自助开通对应接口的权限，否则代码提审时会被拦截。而且不是所有类目都能开通位置接口，类目不在规定范围内时连开通按钮都不会出现。这也解释了为什么很多个人小程序做不了定位功能——不是技术问题，是资质问题。
三、地图组件：属性不多，但每一个都有用
map 组件的用法核心是三个属性：中心经度、中心纬度、标记点数组。经纬度决定地图打开时"看哪里"，标记点决定地图上"有什么"。
标记点是一个对象数组，每个对象描述一个点：唯一的编号、经度、纬度、图标路径、图标宽高，还有一个可选的文字标签。案例里两个标记点各有特色：一个用小图标配"我的位置"标签，黄底蓝字；另一个图标稍大，配学院南门的名称，紫底黄字。标签的颜色、背景色、字号都可以单独设置，这让地图上的信息一眼可辨。图标是提前放在项目 images 文件夹里的两张图片，通过路径引用——这也提示我们，地图标记的图标完全可以自定义，用什么风格的图钉、什么颜色，都是设计自由。
案例还顺手把地图设成了满宽加固定高度，上边留出与卡片的间距，下面紧跟着按钮区，整体是一个简洁的纵向布局：标题、地图、按钮依次排开。
四、选择位置：一次交互带动两处更新
“选择位置"按钮的实现围绕选择位置接口展开。调用后微信会弹出一个完整的地图选点页面，下方列出周边的地址名称，选中某个地址后图钉会跟着移动。用户点"完成"后，接口通过回调把结果交回来，结果里就包含了所选位置的经纬度和地址名称等详细信息。
案例在成功回调里做了两件事：一是把结果打印到控制台，方便调试时观察返回结构；二是把页面数据里的经度和纬度更新为所选位置的值。由于地图组件的属性是绑定到页面数据上的，数据一变，地图中心就自动移过去了——整个过程不需要手动操作地图对象。这就是小程序数据驱动视图的典型体现：界面跟着数据走，回调里改数据，页面自然更新。
五、打开位置：两个接口的接力
“打开位置"按钮展示了一次两个接口的接力配合。打开内置地图本身需要知道"打开哪里”，案例选择的做法是先获取用户当前的地理位置，拿到经纬度后立刻传给打开位置的接口。
这里有个容易忽略的细节：获取位置时指定了坐标类型为国测局坐标。微信的定位系统默认返回的是这种坐标系，内置地图也认这种坐标系，两者直接对接不会有偏移；但如果以后要把坐标送到使用其他坐标系（比如百度、谷歌系）的服务里，就必须先做坐标转换，否则位置会差出几百米。这类坐标系问题在地图开发里是经典的"隐形坑”，案例的写法恰好把正确的姿势示范了出来。