微信小程序高德地图SDK的解析

2、设置 index.wxml 文件。

index.wxml 在项目空间的 page/index 目录下，该文件是页面结构文件，用来搭建页面结构，绑定数据和交互处理函数等。

示例代码如下：

3、设置 index.wxss 文件。

index.wxss 在项目空间的 page/index 目录下，是页面样式文件。

示例代码如下：

第 7 步：构建和手机预览您的小程序

点击左侧菜单栏中 控制台 按钮，构建您的小程序，查看运行效果。

您也可以选择在微信上看最终的效果，选择开发工具左侧菜单栏的"项目"，点击"预览"，使用微信扫码后即可在微信客户端中体验。

获取Key

最后更新时间: 2017年1月6日

1、进入控制台，创建一个新应用。如果您之前已经创建过应用，可直接跳过这个步骤。

获取POI数据

最后更新时间: 2017年1月9日

查找您当前位置周边 “餐饮服务”、“商务住宅”、“生活服务”类型的POI，解决您的吃穿住行问题。

SDK 返回 marker 数组，可以直接用来在微信的地图组件上标记，同时，也返回了POI数组用于您的自定义的界面页面展示。

实现POI周边查询功能的步骤如下：

1、在页面的 js 文件中，实例化 AMapWX 对象，处理搜索数据。

首先，引入 amap-wx.js 文件。

然后，构造 AMapWX 对象，并调用 getPoiAround 方法，代码如下：

2、编写页面的 wxml 文件，搭建页面结构。

3、编写页面的 wxss 文件，设置页面样式。

示例将查询结果以 marker 显示在地图上，同时点击 marker 时，以文本显示 marker 的详细信息。运行程序，效果如下：

获取地址描述数据

可以将定位地点的详细地址信息，便于您快速的找到准确的地点。

实现逆地理编码功能的步骤如下：

1、在页面的 js 文件中，实例化 AMapWX 对象，处理搜索数据。

首先，引入 amap-wx.js 文件。

然后，构造 AMapWX 对象，并调用 getPoiAround 方法，代码如下：

2、编写页面的 wxml 文件，搭建页面结构。

3、编写页面的 wxss 文件，设置页面样式。

示例将当前位置以 marker 的形式显示在地图上，并通过逆地理编码请求，获取该位置的详细的地址信息，以文本形式显示。运行程序，效果如下：

获取实时天气数据

查询您当前定位城市的实时天气情况，帮助您合理安排出行。

实现天气查询功能的步骤如下：

1、在页面的 js 文件中，引入amap-wx.js 文件，实例化 AMapWX 对象，并调用 getWeather 方法获取搜索数据，代码如下：

2、编写页面的 wxml 文件，搭建页面结构。

3、编写页面的 wxss 文件，设置页面样式。

示例将天气情况以文本形式显示。运行程序，效果如下：

以上就是微信小程序 高德地图SDK的解析的详细内容，更多请关注其它相关文章！