marker 头像 高德地图_微信小程序——定位、地图显示、线路规划导航

一、简介

小程序相对app开发而言，适用平台更加广泛、开发成本也很低，开发者只需要考虑微信方面的支持即可，无需关注用户使用的手机型号。在微信小程序中，各大小程序也开始进行了地图定位导航、线路规划等功能开发，但微信本身API有限制，某些功能无法实现，所以我们今天研究如何进行小程序的线路规划操作。

二、实现前的准备

我们这次采取高德地图小程序API进行开发，所以我们需要申请小程序Key，并下载一个amap-wx.js文件。

高德地图小程序支持APIhttps://lbs.amap.com/api/wx/guide/get-data/poi

三、手写demo 3.1、全局apps.js文件中注册key

App({
      d: {
      .....  },  gdMapProperties:{
        key:"xxxxxx"  },  ....

3.2、创建Page以及页面和定位显示位置获取3.2.1、地图页面中引入相关js

var amapFile = require("../../../utils/amap-wx.js");const apps = getApp();

3.2.2、权限相关提示注册

小程序中的app.json包含页面路由和权限等一系列配置信息，开发小程序地图涉及到定位权限，所以我们需要优先进行位置权限注册。

"permission": {
        "scope.userLocation": {
          "desc": "您的位置信息将用于设备定位和蓝牙操作"    }  },

3.2.3、代码检测权限

在实际开发中，位置信息会在小程序加载时进行系统权限申请提示，考虑到有些用户会进行权限的拒绝操作，所以我们需要使用代码判断权限的获取情况，以及能更好的进行定位。

首先，页面加载完成后，我们尝试申请当前的位置信息。

onLoad: function () {
        var that = this;    this.data.myAmapFun = new amapFile.AMapWX({ key: apps.gdMapProperties.key });    //授权检测    getPer