微信小程序 高德地图SDK:
简介
微信小程序 SDK 帮您在微信小程序中获取高德丰富的地址描述、POI和实时天气数据。
功能介绍
账号与Key的申请
注册成为高德开发者需要分三步:
第一步,注册高德开发者;第二步,去控制台创建应用;第三步,获取Key。
1注册高德开发者
2创建应用
3获取API key
入门指南
最后更新时间: 2017年1月9日
本指南是使用微信小程序SDK的快速入门指南。
第 1 步:下载并安装微信小程序开发工具
按照微信小程序开发文档下载并安装微信小程序开发者工具。
第 2 步:获取高德Key
第 3 步:创建项目
按以下步骤新建一个本地小程序项目。
1、启动 "微信web开发者工具",使用微信扫描二维码后,并在微信上点击 "确认登录" 按钮后登录到开发工具。
2、点击 "本地小程序项目" 按钮选择调试类型。
3、点击 "+" 按钮,添加项目。
4、依次输入 AppID(获取方法请参考:),项目名称,选择项目目录,并勾选 "在当前目录中创建 quick start 项目",然后点击 "添加项目" 按钮,重新登录微信公众平台,完成项目创建。相关下载页面下载开发包并解压。
第 4 步:下载并安装微信小程序SDK
从相关下载页面下载开发包并解压。
解压后得到 amap-wx.js 文件,在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js 文件拷贝到 libs 的本地目录下,完成安装。
第 5 步:设置安全通讯域名
为了保证高德小程序 SDK 中提供的功能的正常使用,需要设置安全域名。
登录微信公众平台,在 "设置"->"开发设置" 中设置 request 合法域名,将 https://restapi.amap.com 中添加进去,如下图所示:
第 6 步:Hello AMapWX
1、创建小程序实例。
若在创建项目时,勾选了"在当前目录中创建 quick start 项目",可直接跳过此步骤,否则请参考微信小程序开发文档进行小程序示例创建。
2、设置 index.js 文件。
index.js 在项目空间的 page/index 目录下,是页面的脚本文件,在这个文件中完成监听并处理页面的生命周期函数,声明并处理数据,响应页面交互事件等。
首先,在 index.js 中引入 amap-wx.js 文件。
var amapFile = require('path/to/amap-wx.js');//如:../../libs/amap-wx.js
然后,在 index.js 中实例化 AMapWX 对象,调用 getPoiAround 方法,获取POI数据。
为保证 marker 以自定义的图标显示,需在项目中新建 img 目录,并将 marker 对应的图标拷贝到项目的本地的 img 目录中,同时在 index.js 添加以下代码:
var markersData = []; Page({ data: { markers: [], latitude: '', longitude: '', textData: {} }, makertap: function(e) { var id = e.markerId; var that = this; that.showMarkerInfo(markersData,id); that.changeMarkerColor(markersData,id); }, onLoad: function() { var that = this; var myAmapFun = new amapFile.AMapWX({key:'您的key'}); myAmapFun.getPoiAround({ iconPathSelected: '选中 marker 图标的相对路径', //如:../../img/marker_checked.png iconPath: '未选中 marker 图标的相对路径', //如:../../img/marker.png success: function(data){ markersData = data.markers; that.setData({ markers: markersData }); that.setData({ latitude: markersData[0].latitude }); that.setData({ longitude: markersData[0].longitude }); that.showMarkerInfo(markersData,0); }, fail: function(info){ wx.showModal({title:info.errMsg}) } }) }, showMarkerInfo: function(data,i){ var that = this; that.setData({ textData: { name: data[i].name, desc: data[i].address } }); }, changeMarkerColor: function(data,i){ var that = this; var markers = []; for(var j = 0; j < data.length; j++){ if(j==i){ data[j].iconPath = "选中 marker 图标的相对路径"; //如:../../img/marker_checked.png }else{ data[j].iconPath = "未选中 marker 图标的相对路径"; //如:../../img/marker.png } markers.push(data[j]); } that.setData({ markers: markers }); } })
2、设置 index.wxml 文件。
index.wxml 在项目空间的 page/index 目录下,该文件是页面结构文件,用来搭建页面结构,绑定数据和交互处理函数等。
示例代码如下: