1. 引言
随着互联网技术的快速发展,移动互联网用户快速增长,移动应用程序成为未来互联网的切入点,小程序应运而生。高德地图是一款常用的地图服务,为小程序开发者提供了强大的地图API接口,本文将浅析小程序中如何引入高德地图。
2. 获取高德开发者账号
2.1 注册高德开发者账号
首先,需要前往高德开放平台注册一个开发者账号,然后创建一个应用,获得相应的AppKey。
打开高德开放平台,点击右上角“注册/登录”,接着选择“注册账号”,填写个人信息,完成注册。在登陆后的页面上,选择“我的应用”,然后点击“创建新应用”按钮。
重要提示:在创建应用时需要设置“应用类型”,选择“WebAPI”即可。然后根据提示信息输入应用名称、简介、网站地址等信息即可。
2.2 获取AppKey
创建应用之后,就可以获得一个AppKey。这个AppKey是后续小程序中使用高德地图API所必需的参数。在应用管理页面中,可以看到这个AppKey,点击复制即可。
3. 引入高德地图SDK
在小程序中引入高德地图SDK有两种方式:一是使用高德地图API官方提供的SDK,二是使用第三方开发者提供的SDK。
3.1 官方SDK引入方式
高德地图API官方提供了小程序地图组件,可以直接使用。在小程序开发者工具中的app.js文件中引入以下代码即可:
// 引入高德地图SDK
import amapFile from './libs/amap-wx.js'
// 创建高德地图对象
const myAmapFun = new amapFile.AMapWX({
key: 'your amap key'
})
在小程序开发者工具中的index.wxml文件中添加以下地图组件代码:
<amap key='your amap key' longitude='116.397458' latitude='39.909716' />
注意:在这个例子中,高德地图需要的参数有key、longitude和latitude,其中key指代第二步中获取到的AppKey,而longitude和latitude分别表示地图经纬度信息。
3.2 第三方SDK引入方式
除了官方提供的SDK之外,还有一些第三方开发者提供的高德地图SDK。这些SDK更加灵活,提供了更多的功能,但是需要自己根据需要获取。
以使用minapp-amap为例,需要按照以下步骤操作:
在小程序根目录下创建'project.config.json'文件,添加以下配置信息:
{
"miniprogramRoot": ".",
"appid": "",
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": true
},
"plugins": {
"minapp-amap": {
"version": "5.0.0",
"provider": "wx0593a4b3e9c201e9"
}
}
}
注意:这里需要填写第二步中获取到的AppId。
在小程序根目录下执行以下命令安装minapp-amap:
npm i minapp-amap -S --production
在需要使用高德地图的小程序页面中添加以下代码:
const sdk = require('minapp-amap/sdk/amap-weapp-sdk')
sdk.init({
apiKey: 'your minapp-amap API Key'
})
注意:这里需要填写minapp-amap的API Key。
4. 总结
在本文中,我们学习了如何在小程序中引入高德地图,使用官方SDK或第三方SDK均可。当然,这只是一个入门级的示例,高德地图API还提供了大量更加酷炫的功能,例如地点搜索、路径规划等等。需要根据项目需要选择相应的API来使用。在开发过程中,要认真查阅高德地图API的开发文档,充分利用高德地图提供的功能,为小程序开发增加更多的乐趣!