微信小程序 高德地图SDK的解析(微信小程序在哪里找?)

网友投稿 1390 2022-10-07

微信小程序 高德地图SDK的解析(微信小程序在哪里找?)

微信小程序 高德地图SDK的解析(微信小程序在哪里找?)

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

微信小程序 高德地图SDK:

简介

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

功能介绍

账号与Key的申请

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

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

1注册高德开发者

2创建应用

3获取API key

获取API Key

入门指南

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

本指南是使用微信小程序SDK的快速入门指南。

第 1 步:-并安装微信小程序开发工具

按照微信小程序开发文档-并安装微信小程序开发者工具。

第 2 步:获取高德Key

点我获取Key>>

点我查看申请高德Key的方法>>

第 3 步:创建项目

按以下步骤新建一个本地小程序项目。

第 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 中引入 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 目录下,该文件是页面结构文件,用来搭建页面结构,绑定数据和交互处理函数等。

示例代码如下:

{{textData.name}} {{textData.desc}}-

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、进入控制台,创建一个新应用。如果您之前已经创建过应用,可直接跳过这个步骤。

配置工程

最后更新时间: 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 文件,搭建页面结构。

-

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

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

获取地址描述数据

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

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

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 文件,搭建页面结构。

-

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

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

获取实时天气数据

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

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

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 文件,搭建页面结构。

-

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/

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:使用Qt编写opengl学习路线
下一篇:2017年8月6日21:42:57
相关文章

 发表评论

暂时没有评论,来抢沙发吧~