微信小程序 高德地图SDK详解及简单实例(源码下(3)

示例将查询结果以 marker 显示在地图上,同时点击 marker 时,以文本显示 marker 的详细信息。运行程序,效果如下: 

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

获取地址描述数据

可以将定位地点的详细地址信息,便于您快速的找到准确的地点。

实现逆地理编码功能的步骤如下:

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> <!--定义页面结构,可以使用地图组件也能使用其他组件 --> </view>

3、编写页面的 wxss 文件,设置页面样式。

.map_container{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } ……

示例将当前位置以 marker 的形式显示在地图上,并通过逆地理编码请求,获取该位置的详细的地址信息,以文本形式显示。运行程序,效果如下: 

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

获取实时天气数据

查询您当前定位城市的实时天气情况,帮助您合理安排出行。

实现天气查询功能的步骤如下:

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> <!--定义页面结构,使用文本组件或其他组件 --> </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; } ……

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

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

官方地址:

demo下载:

(jb51.net).rar

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwdxpw.html