地图类小程序 || 从技术的角度设计产品

1. 解析微信Map组件API

1.1 地图当前中心经纬度

如果想要设置地图的中心需要设置Map组件的两个属性值：longitude和latitude，就可以将中心定位到中心点上。

1.2 地图上坐标标记

微信地图提供了一个属性markers，可以用来标记多个标记，并且可以自定义标记的图形，如下图就是我从Google上随意下载的一个红色标记。

这里要注意一下，PC上如果marker不在当前视口，会出现跳到对应的位置时，没有展示，但是在手机上是没有问题的。

1.3 地图上控件

在文档中有一个controls的属性，可以在地图上控制控件的尺寸，以及在地图上的位置和图形。也就可以用来制作放大缩小的控件。

1.4 事件

以上的markers和controls都可以绑定点击事件，甚至是拖动的时候也会有回调函数来获取它id值。
这样就可以做很多事情了。

中心位置如图所示

<map id="map" 
          longitude="{{longitude}}" 
          latitude="{{latitude}}" 
          scale="14" 
          controls="{{controls}}" 
          bindcontroltap="controltap" 
          markers="{{markers}}" 
          bindmarkertap="markertap" 
          bindregionchange="regionchange" 
          show-location>
</map>```
```JavaScript
Page({
  data: {
    longitude: 113.324520,
    latitude: 23.099994,
    markers:[{
      iconPath: "/icons/mapmark.png",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 30,
      height: 30
    },
      {
        iconPath: "/icons/mapmark.png",
        id: 0,
        latitude: 23.089994,
        longitude: 113.324520,
        width: 30,
        height: 30
      },
      {
        iconPath: "/icons/mapmark.png",
        id: 1,
        latitude: 23.099000,
        longitude: 113.314520,
        width: 30,
        height: 30
      }
    ]
  },
  open(){
    wx.openLocation({
      latitude: 23.099994,
      longitude: 113.324520,
      scale: 28,
      name: 'home of ushow jack ',
      address: '阿斯顿发送到分公司'
    })
  }
})

代码如上，就可以地图的中心位置定位到(23.099994,113.324520)这个坐标上。并且在三个坐标上标记了几个marker。

2. 地图经纬度

2.1 获取当前经纬度

通过getLocation这个API，地图是可以获取到当前位置的经纬度：

   var _this = this;
   wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        console.log(res)
        _this.setData({
          longitude: longitude,
          latitude: latitude
        })
      }
    })

但是需要用户授权。

2.2 导航

如何从知道经纬度到生成导航路线可能是产品最关心的一个问题。
其实只需要微信小程序API openLocation就可以打开一个全屏的地图页面，并且可以通过点击绿色的图标，拉起导航，或者是手机上的地图App，是不是很棒。而且可以定义名称和介绍。

3. 外接其他地图的API

腾讯地图几乎是没有任何搜索功能的。完全可以外接百度地图或者高德地图的API实现对附近或者是地点的搜索。

4. 谈谈产品设计

那么说了这么多技术，可以怎么实现地图类的产品呢？

简单流程图

这样一个简单的地图类小程序就完成了。是不是很棒。