微信小程序——添加地图、地图上打点、自定义地图

目录

1.摘要

 1.1 开发工具

 1.2 开发框架

 1.3 版本号

2. 添加地图

3. 地图打点 

4. 个性化地图

4.1 申请开通个性化地图能力

4.2 添加小程序个性地图

4.3 自定义地图

---

1.摘要

 1.1 开发工具

微信开发者工具、sublime、git

 1.2 开发框架

wepy2.0

 1.3 版本号

微信开发者工具2.9.5、sublime3.2.2、wepy2.0

2.添加地图

参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/map.html

tips:

1. show-location  显示带有方向的当前定位点,本项目不需要不添加。

2. scale="4" 缩放比例，缩放级别，取值范围为3-20

3.地图打点 

tips:

1. 添加markers，目前使用微信开发者2.10.0会出现：Cannot read property 'anchorX' of undefined，换为低版本即可。
2.  include-points  缩放视野以包含所有给定的坐标点
3. markers的图标想要圆的可直接让设计做成圆形，用iconPath添加
4. label中的content不能居中的问题：
   anchorX: -(0.5 * (name.length * fontsize))/2,这是网上看到的解决方法。
   例如：

   label: {
     content: "鄂尔多斯",
     color: "#fff",
     fontSize: 12,
     anchorX: -(0.5 * (5 * 24))/2,
     textAlign: "center"
   }

   这里content设置成name.length+1是因为在真机上会出现偏移，+1就正好居中。。。fontSize我也不知道为什么是2倍
   反正这样设置就居中了label的文字，希望官方能出自适应的居中吧
5. 不给map宽高生成的地图会变得很小一块在左上角
6. 目前好像不支持文字阴影加粗等属性

 4. 个性化地图

4.1 申请开通个性化地图能力

开发-开发者工具-腾讯位置服务

      

 

4.2 添加小程序个性地图

控制台-key管理-样式选择

 

 

tips：这里将width写成之前的 {{mapWidth}}rpx，开发者程序没问题，真机上右边会有白边，改成width：100%，并将父盒子宽度也100%，白边消失。

标题

 这为什么不能放一块。。。。。。。

 

4.3 自定义地图

控制台-个性化地图-样式选择-编辑样式

可修改边线、区块等内容的显示隐藏、颜色

tips：

1. 修改之后保存， 控制台-个性化地图-我的样式-应用样式设置-编辑，点击选择地图样式下图片，替换自定义的样式
2. 开发者工具并不显示自定义样式，用真机查看。
3. 在更换样式后代码不用改动，不用重新上传。