微信小程序高德地图SDK详解及简单实例（源码下载）

微信⼩程序⾼德地图SDK详解及简单实例（源码下载）
微信⼩程序⾼德地图SDK：
简介
微信⼩程序 SDK 帮您在微信⼩程序中获取⾼德丰富的地址描述、POI和实时天⽓数据。

功能介绍
账号与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 中提供的功能的正常使⽤，需要设置安全域名。

第 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 ⽬录下，该⽂件是页⾯结构⽂件，⽤来搭建页⾯结构，绑定数据和交互处理函数等。

⽰例代码如下：
<view class="map_container">
<map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>
</view>
<view class="map_text">
<text class="h1">{{}}</text>
<text>{{textData.desc}}</text>
</view>
3、设置 index.wxss ⽂件。

index.wxss 在项⽬空间的 page/index ⽬录下，是页⾯样式⽂件。

⽰例代码如下：
.map_container{
position: absolute;
top: 0;
bottom: 80px;
left: 0;
right: 0;
}
.map{
width: 100%;
height: 100%;
}
.map_text{
position: absolute;
left: 0;
right: 0;
bottom: 0px;
height: 80px;
background: #fff;
padding: 0 15px;
}
text{
margin: 5px 0;
display: block;
font-size:12px;
}
.h1{
margin: 15px 0;
font-size:15px;
}
第 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 ⽂件。

var amapFile = require('path/to/amap-wx.js');//如：../../libs/amap-wx.js
然后，构造 AMapWX 对象，并调⽤ getPoiAround ⽅法，代码如下：
Page({
onLoad: function() {
var that = this;
var myAmapFun = new amapFile.AMapWX({key:'⾼德Key'});
myAmapFun.getPoiAround({
success: function(data){
//成功回调
},
fail: function(info){
//失败回调
console.log(info)
}
})
},
})
2、编写页⾯的 wxml ⽂件，搭建页⾯结构。

<view class="map_container">
<!--定义页⾯结构，可以使⽤地图组件也能使⽤其他组件 -->
</view>
3、编写页⾯的 wxss ⽂件，设置页⾯样式。

.map_container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
……
⽰例将查询结果以 marker 显⽰在地图上，同时点击 marker 时，以⽂本显⽰ marker 的详细信息。

运⾏程序，效果如下：获取地址描述数据
可以将定位地点的详细地址信息，便于您快速的找到准确的地点。

实现逆地理编码功能的步骤如下：
1、在页⾯的 js ⽂件中，实例化 AMapWX 对象，处理搜索数据。

⾸先，引⼊ amap-wx.js ⽂件。

var amapFile = require('path/to/amap-wx.js');//如：../../libs/amap-wx.js
然后，构造 AMapWX 对象，并调⽤ getPoiAround ⽅法，代码如下：
Page({
onLoad: function() {
var that = this;
var myAmapFun = new amapFile.AMapWX({key:'⾼德Key'});
myAmapFun.getRegeo({
success: function(data){
//成功回调
},
fail: function(info){
//失败回调
console.log(info)
}
})
},
})
2、编写页⾯的 wxml ⽂件，搭建页⾯结构。

<view class="map_container">
<!--定义页⾯结构，可以使⽤地图组件也能使⽤其他组件 -->
</view>
3、编写页⾯的 wxss ⽂件，设置页⾯样式。

.map_container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
……
⽰例将当前位置以 marker 的形式显⽰在地图上，并通过逆地理编码请求，获取该位置的详细的地址信息，以⽂本形式显⽰。

运⾏程序，效果如下：
获取实时天⽓数据
查询您当前定位城市的实时天⽓情况，帮助您合理安排出⾏。

实现天⽓查询功能的步骤如下：
1、在页⾯的 js ⽂件中，引⼊amap-wx.js ⽂件，实例化 AMapWX 对象，并调⽤ getWeather ⽅法获取搜索数据，代码如下：
var amapFile = require('path/to/amap-wx.js');//如：../../libs/amap-wx.js
Page({
onLoad: function() {
var that = this;
var myAmapFun = new amapFile.AMapWX({key:'⾼德Key'});
myAmapFun.getWeather({
success: function(data){
//成功回调
},
fail: function(info){
//失败回调
console.log(info)
}
})
}
})
2、编写页⾯的 wxml ⽂件，搭建页⾯结构。

<view class="container">
<!--定义页⾯结构，使⽤⽂本组件或其他组件 -->
</view>
3、编写页⾯的 wxss ⽂件，设置页⾯样式。

.container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #4D8AD7;
color: #fff;
font-size: 18px;
padding-top: 200rpx;
padding-left: 150rpx;
}
……
⽰例将天⽓情况以⽂本形式显⽰。

运⾏程序，效果如下：
demo下载：。