今天小编给大家分享一下微信小程序中高德地图SDK使用实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。第 1 步：下载并安装微信小程序开发工具按照微信小程序开发文档下载并安装微信小程序开发者工具。第 2 步：获取高德Key点我获取Key>>点我查看申请高德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 AMapWX1、创建小程序实例。若在创建项目时，勾选了”在当前目录中创建 quick start 项目”，可直接跳过此步骤，否则请参考微信小程序开发文档进行小程序示例创建。2、设置 index.js 文件。index.js 在项目空间的 page/index 目录下，是页面的脚本文件，在这个文件中完成监听并处理页面的生命周期函数，声明并处理数据，响应页面交互事件等。首先，在 index.js 中引入 amap-wx.js 文件。然后，在 index.js 中实例化 AMapWX 对象，调用 getPoiAround 方法，获取POI数据。为保证 marker 以自定义的图标显示，需在项目中新建 img 目录，并将 marker 对应的图标拷贝到项目的本地的 img 目录中，同时在 index.js 添加以下代码：2、设置 index.wxml 文件。index.wxml 在项目空间的 page/index 目录下，该文件是页面结构文件，用来搭建页面结构，绑定数据和交互处理函数等。示例代码如下：3、设置 index.wxss 文件。index.wxss 在项目空间的 page/index 目录下，是页面样式文件。示例代码如下：第 7 步：构建和手机预览您的小程序点击左侧菜单栏中 控制台 按钮，构建您的小程序，查看运行效果。您也可以选择在微信上看最终的效果，选择开发工具左侧菜单栏的”项目”，点击”预览”，使用微信扫码后即可在微信客户端中体验。获取Key最后更新时间: 2017年1月6日1、进入控制台，创建一个新应用。如果您之前已经创建过应用，可直接跳过这个步骤。2、 在创建的应用上点击”添加新Key”按钮，在弹出的对话框中，依次：输入应用名名称，选择绑定的服务平台为“微信小程序”，如下图所示：在阅读完高德地图API服务条款后，勾选此选项，点击“提交”，完成 Key 的申请，此时您可以在所创建的应用下面看到刚申请的 Key 了。配置工程最后更新时间: 2017年1月6日第 香港云主机 1 步：新建一个小程序项目新建一个本地小程序项目，您可参考入门指南章节。第 2 步：添加 js 文件在创建的项目中，新建一个名为 libs 目录，将 amap-wx.js 文件拷贝到 libs 的本地目录下，如下图所示。获取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使用实例分析”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注开发云行业资讯频道。
这篇文章主要介绍“C++怎么移除元素”，在日常操作中，相信很多人在C++怎么移除元素问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”C++怎么移除元素”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！Given an arrayn…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
