重庆小潘seo博客

当前位置:首页 > 重庆网络营销 > 小潘杂谈 >

小潘杂谈

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

时间:2020-09-08 16:00:08 作者:重庆seo小潘 来源:
这篇文章主要介绍了微信小程序 高德地图详解及简单实例(源码下载)的相关资料,需要的朋友可以参考下 微信小程序 高德地图SDK: 简介 微信小程序 SDK 帮您在微信小程序中获取高德丰富的地址描述、POI和实时天气数据。 功能介绍 账号与Key的申请 注册成为高德

这篇文章主要介绍了微信小程序 高德地图详解及简单实例(源码下载)的相关资料,需要的朋友可以参考下

微信小程序 高德地图SDK:

简介

微信小程序 SDK 帮您在微信小程序中获取高德丰富的地址描述、POI和实时天气数据。

功能介绍

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

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

账号与Key的申请

注册成为高德开发者需要分三步:

第一步,注册高德开发者;第二步,去控制台创建应用;第三步,获取Key。

1注册高德开发者

2创建应用

3获取API key

获取API Key

入门指南

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

本指南是使用微信小程序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 中添加进去,如下图所示:

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

第 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');//如:..