我是 PHP 程序员

项目所需状态：进入小程序获取位置授权并显示站点，点击站点返回对应站点信息。

项目效果图:

关键字知识点：获取本机定位，地图标点markers，路线规划接口使用以及时间，距离转换

关联知识点已经在其他几个文章有说明：

获取本机定位：https://blog.csdn.net/qq_27987023/article/details/91043029

时间距离转换：https://blog.csdn.net/qq_27987023/article/details/97368737

地图标点文档:

marker

标记点用于在地图上显示标记的位置

marker 上的气泡 callout

map组件构成

2. <!--参数说明：latitude，longitude中心点坐标，scale：缩放等级；markers：地图气泡；polyline：路线；bindmarkertap：点击气泡触发事件；bindtap：点击地图触发事件-->

3. <map id="myMap" style="width: 100%; height: 100%;" latitude="{{latitude}}" longitude="{{longitude}}" scale="12" show-location='true' show-compass="true" markers="{{markers}}" polyline="{{polyline}}" bindmarkertap="markertap" bindtap="change_type">

4.   </map>

我的项目接口返回站点数据格式：

marks核心数据组装

9. //获取网点信息

10. get_list:function(){

11.       wx.showToast({

12.         title: '页面加载中',

13.       icon: 'loading',

14.       });

15.       let _this = this,

16.       markers = new Array();

17.       app._post('getDevGroup', {}, function(result){

18.       if(result.code == 4003){

19.         wx.navigateTo({

20.           url:'/pages/index/login'

21.         })

22.       }else{

23.         for(var i=0;i<result.data.length;i++){

24.           markers[i] = new Object();

25.           markers[i]['id'] = i;

26.           markers[i]['site_id'] = result.data[i].id;

27.           markers[i]['latitude'] = parseFloat(result.data[i].latitude);

28.           markers[i]['longitude'] = parseFloat(result.data[i].longitude);

29.           markers[i]['address'] = result.data[i].address;

30.           markers[i]['site_price'] = result.data[i].price;

31.           markers[i]['dev_outlets_ImgPath'] = result.data[i].outletsImgPath;

32.           markers[i]['countData'] = result.data[i].countData;

33.           markers[i]['callout'] = new Object();

34.           markers[i]['callout']['content'] = result.data[i].outletsName;

35.           markers[i]['callout']['padding'] = 6;

36.           markers[i]['callout']['bgColor'] = "#000000";

37.           markers[i]['callout']['color'] = '#ffffff';

38.           markers[i]['callout']['display'] = 'BYCLICK';

39.           markers[i]['callout']['textAlign'] = 'center';

40.           markers[i]['callout']['borderRadius'] = 6;

41.           markers[i]['iconPath'] = '/images/mark.png';

42.           markers[i]['height'] = 30;

43.           markers[i]['width'] = 30;

44.         }

45.         _this.setData({

46.           markers:markers

47.         })

48.         wx.hideToast({});

49.       }

50.     });

51.   },