如何在finclip中实现炫酷的地图定位？这篇文章你一定要看看！

在finclip平台中，似乎很少人使用地图组件。小编寻找了一圈，并没有发现很详细的教程。今天，由我带领大家如何实现炫酷的地图定位。

查看finclip的文档，我发现高德地图的匹配度是最高的，支持的api也是最多的。所以我将调用高德地图的api实现。

1. 获取地图的key

前往高德地图的开发者控制台

(图源:lbs.amap.com/api/wx/summ…)

创建新应用

复制获取的key

2. 配置地图文件

添加js文件 在创建的项目中，新建一个名为 miniprogram_npm/libs 目录，将 amap-wx.js （amap-wx.js  从相关下载页面下载的 zip 文件解压后得到）文件拷贝到 libs 的本地目录下，如下图所示

然后构建npm

注意：一定要在miniprogram_npm目录下 否则会报错

3. 获取数据

当前我们支持获取POI、地址描述、实时天气、数据。而今天我将讲述如何获取POI数据。

获取POI数据

1.将js文件引入

var amapFile = require('libs/amap-wx.130');

2.构造 AMapWX 对象，并调用 getPoiAround 方法

其中可使用marker自定义定位标签。

Page({
  data:{
    markers:[{
      icon:"location",
      id:0,
      latitude:纬度,
      longitude:经度,
    }],
    
  },
  onLoad: function() {
    var that = this;
    var myAmapFun = new amapFile.AMapWX({key:'自己在1高德获取的key'});
    myAmapFun.getPoiAround({
      success: function(data){
        //成功回调
        console.log(data)
      },

  },
})

3.前端调用

<view class="map_container">
<map longitude="" latitude="" markers="{{markers}}"></map>
</view>

最终我们就可以实现啦

报错

如果出现小程序npm构建生成miniprogram_npm文件问题

npm init
npm i miniprogram-sm-crypto --production

关于经纬度查询

geohub.amap.com/mapstyle/in…

其他的api调用大家可以前往finclip文档www.finclip.com/mop/documen…

(图源:lbs.amap.com/api/wx/summ…)