目录

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

<template>
  <map style="width: {{mapWidth }}rpx; height: {{mapHeight}}rpx;"/>
</template>
<script>
  import wepy from "@wepy/core"
  wepy.page({
    data: {
      mapWidth:'',
      mapHeight:''
    },

    onLoad () {
      var sy = wx.getSystemInfoSync(),
      mapWidth = sy.windowWidth*2,
      mapHeight = sy.windowHeight*2;
      this.mapWidth = mapWidth,
      this.mapHeight = mapHeight
    }
  })
</script>

tips:

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

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

3.地图打点 

<template>
  <map style="width: {{mapWidth }}rpx; height: {{mapHeight}}rpx;" markers="{{markers}}" include-points="{{markers}}"/>
</template>
<script>
  import wepy from "@wepy/core"
  wepy.page({
    data: {
      mapWidth:'',
      mapHeight:'',
      markers: [
        {
          iconPath: "../public/markers.png",
          id: 0,
          latitude: 30.281714,
          longitude: 120.180895,
          width: 40,
          height: 40,
          label: {
            content: "下城",
            color: "#fff",
            fontSize: 12,
            anchorX: -(0.5 * (3 * 24))/2,
            textAlign: "center"
          }
        },
        {
          iconPath: "../public/markers.png",
          id: 1,
          latitude: 40.380874,
          longitude: 116.852466,
          width: 40,
          height: 40,
          label: {
            content: "鄂尔多斯",
            color: "#fff",
            fontSize: 12,
            anchorX: -(0.5 * (5 * 24))/2,
            textAlign: "center"
          }
        }
    },

    onLoad () {
      var sy = wx.getSystemInfoSync(),
      mapWidth = sy.windowWidth*2,
      mapHeight = sy.windowHeight*2;
      this.mapWidth = mapWidth,
      this.mapHeight = mapHeight
    }
  })
</script>

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管理-样式选择

 

 

<map style="width: 100%; height: {{mapHeight}}rpx;" scale="4" subkey="你的key" markers="{{markers}}" include-points="{{markers}}"/>

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

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

 

4.3 自定义地图

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

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

tips：

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