微信小程序 高德地图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 中提供的功能的正常使用，需要设置安全域名。

登录微信公众平台，在 "设置"－>"开发设置" 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去，如下图所示：

第 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">{{textData.name}}</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;
}
……

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

官方地址：http://lbs.amap.com/api/wx/summary/

demo下载：

http://xiazai./201701/yuanma/wx-regeo-poiaround-weather-master().rar

# 微信小程序  # 高德地图SDK  # 高德地图实例  # 微信小程序 地图定位简单实例  # 微信小程序 地图（map）实例详解  # 微信小程序中进行地图导航功能的实现方法  # 微信小程序 使用腾讯地图SDK详解及实现步骤  # 微信小程序 地图map详解及简单实例  # 微信小程序开发之map地图实现教程  # 微信小程序之获取当前位置经纬度以及地图显示详解  # 微信小程序教程之本地图片上传(leancloud)实例详解  # 微信小程序地图(map)组件点击(tap)获取经纬度的方法  # 微信小程序map地图使用方法详解  # 您的  # 回调  # 更新时间  # 新建一个  # 目录下  # 所示  # 开发工具  # 如下图  # 勾选  # 也能  # 下载并安装  # 自定义  # 可以使用  # 在地  # 可直接  # 下载页面  # 绑定  # 跳过  # 请参考  # 目录中 

相关文章： 广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的？  ,购物网站怎么盈利呢？  如何通过宝塔面板实现本地网站访问？  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  建站之星CMS建站配置指南：模板选择与SEO优化技巧  网站代码制作软件有哪些,如何生成自己网站的代码？  高端智能建站公司优选：品牌定制与SEO优化一站式服务  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  内网网站制作软件,内网的网站如何发布到外网？  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  成都响应式网站开发,dw怎么把手机适应页面变成网页？  如何在Golang中使用encoding/gob序列化对象_存储和传输数据  网站制作专业公司有哪些,如何制作一个企业网站，建设网站的基本步骤有哪些？  如何快速重置建站主机并恢复默认配置？  合肥制作网站的公司有哪些,合肥聚美网络科技有限公司介绍？  如何在腾讯云服务器上快速搭建个人网站？  如何生成腾讯云建站专用兑换码？  如何快速生成ASP一键建站模板并优化安全性？  详解jQuery中基本的动画方法  如何将凡科建站内容保存为本地文件？  建站之星各版本价格是多少？  如何快速搭建安全的FTP站点？  详解jQuery停止动画——stop()方法的使用  如何在云主机快速搭建网站站点？  在线ppt制作网站有哪些,请推荐几个好的课件下载的网站？  如何通过虚拟主机空间快速建站？  如何在局域网内绑定自建网站域名？  建站主机助手选型指南：2025年热门推荐与高效部署技巧  c# Task.ConfigureAwait(true) 在什么场景下是必须的  新网站制作渠道有哪些,跪求一个无线渠道比较强的小说网站，我要发表小说？  如何通过可视化优化提升建站效果？  建站主机选购指南与交易推荐：核心配置解析  太原网站制作公司有哪些,网约车营运证查询官网？  网站制作的方法有哪些,如何将自己制作的网站发布到网上？  Swift中swift中的switch 语句  如何用花生壳三步快速搭建专属网站？  公司网站设计制作厂家,怎么创建自己的一个网站？  兔展官网 在线制作,怎样制作微信请帖？  青岛网站设计制作公司,查询青岛招聘信息的网站有哪些？  智能起名网站制作软件有哪些,制作logo的软件？  小建面朝正北，A点实际方位是否存在偏差？  如何选购建站域名与空间？自助平台全解析  建站上传速度慢？如何优化加速网站加载效率？  上海网站制作网站建设公司,建筑电工证网上查询系统入口？  建站主机数据库如何配置才能提升网站性能？  定制建站方案优化指南：企业官网开发与建站费用解析  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  网页设计与网站制作内容,怎样注册网站？  宠物网站制作html代码,有没有专门介绍宠物如何养的网站啊？