溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

微信小程序 高德地圖SDK詳解及簡單實(shí)例(源碼下載)

發(fā)布時(shí)間:2020-09-12 06:52:06 來源:腳本之家 閱讀:443 作者:lqh 欄目:web開發(fā)

微信小程序 高德地圖SDK:

簡介

微信小程序 SDK 幫您在微信小程序中獲取高德豐富的地址描述、POI和實(shí)時(shí)天氣數(shù)據(jù)。

功能介紹

微信小程序 高德地圖SDK詳解及簡單實(shí)例(源碼下載)


微信小程序 高德地圖SDK詳解及簡單實(shí)例(源碼下載)

賬號與Key的申請

注冊成為高德開發(fā)者需要分三步:

第一步,注冊高德開發(fā)者;第二步,去控制臺創(chuàng)建應(yīng)用;第三步,獲取Key。

1注冊高德開發(fā)者

2創(chuàng)建應(yīng)用

3獲取API key

獲取API Key

入門指南

最后更新時(shí)間: 2017年1月9日

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

第 1 步:下載并安裝微信小程序開發(fā)工具

按照微信小程序開發(fā)文檔下載并安裝微信小程序開發(fā)者工具。

第 2 步:獲取高德Key

點(diǎn)我獲取Key>>

點(diǎn)我查看申請高德Key的方法>>

第 3 步:創(chuàng)建項(xiàng)目

按以下步驟新建一個(gè)本地小程序項(xiàng)目。

1、啟動(dòng) "微信web開發(fā)者工具",使用微信掃描二維碼后,并在微信上點(diǎn)擊 "確認(rèn)登錄" 按鈕后登錄到開發(fā)工具。

2、點(diǎn)擊 "本地小程序項(xiàng)目" 按鈕選擇調(diào)試類型。

3、點(diǎn)擊 "+" 按鈕,添加項(xiàng)目。

4、依次輸入 AppID(獲取方法請參考:),項(xiàng)目名稱,選擇項(xiàng)目目錄,并勾選 "在當(dāng)前目錄中創(chuàng)建 quick start 項(xiàng)目",然后點(diǎn)擊 "添加項(xiàng)目" 按鈕,重新登錄微信公眾平臺,完成項(xiàng)目創(chuàng)建。相關(guān)下載頁面下載開發(fā)包并解壓。

第 4 步:下載并安裝微信小程序SDK

從相關(guān)下載頁面下載開發(fā)包并解壓。

解壓后得到 amap-wx.js 文件,在創(chuàng)建的項(xiàng)目中,新建一個(gè)名為 libs 目錄,將 amap-wx.js 文件拷貝到 libs 的本地目錄下,完成安裝。

第 5 步:設(shè)置安全通訊域名

為了保證高德小程序 SDK 中提供的功能的正常使用,需要設(shè)置安全域名。

登錄微信公眾平臺,在 "設(shè)置"->"開發(fā)設(shè)置" 中設(shè)置 request 合法域名,將 https://restapi.amap.com 中添加進(jìn)去,如下圖所示:

微信小程序 高德地圖SDK詳解及簡單實(shí)例(源碼下載)

第 6 步:Hello AMapWX

1、創(chuàng)建小程序?qū)嵗?/p>

若在創(chuàng)建項(xiàng)目時(shí),勾選了"在當(dāng)前目錄中創(chuàng)建 quick start 項(xiàng)目",可直接跳過此步驟,否則請參考微信小程序開發(fā)文檔進(jìn)行小程序示例創(chuàng)建。

2、設(shè)置 index.js 文件。

index.js 在項(xiàng)目空間的 page/index 目錄下,是頁面的腳本文件,在這個(gè)文件中完成監(jiān)聽并處理頁面的生命周期函數(shù),聲明并處理數(shù)據(jù),響應(yīng)頁面交互事件等。

首先,在 index.js 中引入 amap-wx.js 文件。

var amapFile = require('path/to/amap-wx.js');//如:..­/..­/libs/amap-wx.js

然后,在 index.js 中實(shí)例化 AMapWX 對象,調(diào)用 getPoiAround 方法,獲取POI數(shù)據(jù)。

為保證 marker 以自定義的圖標(biāo)顯示,需在項(xiàng)目中新建 img 目錄,并將 marker 對應(yīng)的圖標(biāo)拷貝到項(xiàng)目的本地的 img 目錄中,同時(shí)在 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 圖標(biāo)的相對路徑', //如:..­/..­/img/marker_checked.png
  iconPath: '未選中 marker 圖標(biāo)的相對路徑', //如:..­/..­/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 圖標(biāo)的相對路徑"; //如:..­/..­/img/marker_checked.png
  }else{
  data[j].iconPath = "未選中 marker 圖標(biāo)的相對路徑"; //如:..­/..­/img/marker.png
  }
  markers.push(data[j]);
 }
 that.setData({
  markers: markers
 });
 }
 
})

2、設(shè)置 index.wxml 文件。

index.wxml 在項(xiàng)目空間的 page/index 目錄下,該文件是頁面結(jié)構(gòu)文件,用來搭建頁面結(jié)構(gòu),綁定數(shù)據(jù)和交互處理函數(shù)等。

示例代碼如下:

<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="h2">{{textData.name}}</text>
 <text>{{textData.desc}}</text>
</view>

3、設(shè)置 index.wxss 文件。

index.wxss 在項(xiàng)目空間的 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;
}
.h2{
 margin: 15px 0;
 font-size:15px;
}

第 7 步:構(gòu)建和手機(jī)預(yù)覽您的小程序

點(diǎn)擊左側(cè)菜單欄中 控制臺 按鈕,構(gòu)建您的小程序,查看運(yùn)行效果。

您也可以選擇在微信上看最終的效果,選擇開發(fā)工具左側(cè)菜單欄的"項(xiàng)目",點(diǎn)擊"預(yù)覽",使用微信掃碼后即可在微信客戶端中體驗(yàn)。

獲取Key

最后更新時(shí)間: 2017年1月6日

1、進(jìn)入控制臺,創(chuàng)建一個(gè)新應(yīng)用。如果您之前已經(jīng)創(chuàng)建過應(yīng)用,可直接跳過這個(gè)步驟。

微信小程序 高德地圖SDK詳解及簡單實(shí)例(源碼下載)

2、 在創(chuàng)建的應(yīng)用上點(diǎn)擊"添加新Key"按鈕,在彈出的對話框中,依次:輸入應(yīng)用名名稱,選擇綁定的服務(wù)平臺為“微信小程序”,如下圖所示:

微信小程序 高德地圖SDK詳解及簡單實(shí)例(源碼下載)

在閱讀完高德地圖API服務(wù)條款后,勾選此選項(xiàng),點(diǎn)擊“提交”,完成 Key 的申請,此時(shí)您可以在所創(chuàng)建的應(yīng)用下面看到剛申請的 Key 了。

配置工程

最后更新時(shí)間: 2017年1月6日

第 1 步:新建一個(gè)小程序項(xiàng)目

新建一個(gè)本地小程序項(xiàng)目,您可參考入門指南<創(chuàng)建項(xiàng)目>章節(jié)。

第 2 步:添加 js 文件

在創(chuàng)建的項(xiàng)目中,新建一個(gè)名為 libs 目錄,將 amap-wx.js 文件拷貝到 libs 的本地目錄下,如下圖所示。

微信小程序 高德地圖SDK詳解及簡單實(shí)例(源碼下載)

獲取POI數(shù)據(jù)

最后更新時(shí)間: 2017年1月9日

查找您當(dāng)前位置周邊 “餐飲服務(wù)”、“商務(wù)住宅”、“生活服務(wù)”類型的POI,解決您的吃穿住行問題。

SDK 返回 marker 數(shù)組,可以直接用來在微信的地圖組件上標(biāo)記,同時(shí),也返回了POI數(shù)組用于您的自定義的界面頁面展示。

實(shí)現(xiàn)POI周邊查詢功能的步驟如下:

1、在頁面的 js 文件中,實(shí)例化 AMapWX 對象,處理搜索數(shù)據(jù)。

首先,引入 amap-wx.js 文件。

var amapFile = require('path/to/amap-wx.js');//如:..­/..­/libs/amap-wx.js

然后,構(gòu)造 AMapWX 對象,并調(diào)用 getPoiAround 方法,代碼如下:

Page({
 onLoad: function() {
 var that = this;
 var myAmapFun = new amapFile.AMapWX({key:'高德Key'});
 myAmapFun.getPoiAround({
  success: function(data){
  //成功回調(diào)
  },
  fail: function(info){
  //失敗回調(diào)
  console.log(info)
  }
 })
 },
})

2、編寫頁面的 wxml 文件,搭建頁面結(jié)構(gòu)。

<view class="map_container">
 <!--定義頁面結(jié)構(gòu),可以使用地圖組件也能使用其他組件 -->
</view>

3、編寫頁面的 wxss 文件,設(shè)置頁面樣式。

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

示例將查詢結(jié)果以 marker 顯示在地圖上,同時(shí)點(diǎn)擊 marker 時(shí),以文本顯示 marker 的詳細(xì)信息。運(yùn)行程序,效果如下: 微信小程序 高德地圖SDK詳解及簡單實(shí)例(源碼下載)

獲取地址描述數(shù)據(jù)

可以將定位地點(diǎn)的詳細(xì)地址信息,便于您快速的找到準(zhǔn)確的地點(diǎn)。

實(shí)現(xiàn)逆地理編碼功能的步驟如下:

1、在頁面的 js 文件中,實(shí)例化 AMapWX 對象,處理搜索數(shù)據(jù)。

首先,引入 amap-wx.js 文件。

var amapFile = require('path/to/amap-wx.js');//如:..­/..­/libs/amap-wx.js

然后,構(gòu)造 AMapWX 對象,并調(diào)用 getPoiAround 方法,代碼如下:

Page({
 onLoad: function() {
 var that = this;
 var myAmapFun = new amapFile.AMapWX({key:'高德Key'});
 myAmapFun.getRegeo({
  success: function(data){
  //成功回調(diào)
  },
  fail: function(info){
  //失敗回調(diào)
  console.log(info)
  }
 })
 },
})

2、編寫頁面的 wxml 文件,搭建頁面結(jié)構(gòu)。

<view class="map_container">
 <!--定義頁面結(jié)構(gòu),可以使用地圖組件也能使用其他組件 -->
</view>

3、編寫頁面的 wxss 文件,設(shè)置頁面樣式。

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

示例將當(dāng)前位置以 marker 的形式顯示在地圖上,并通過逆地理編碼請求,獲取該位置的詳細(xì)的地址信息,以文本形式顯示。運(yùn)行程序,效果如下: 微信小程序 高德地圖SDK詳解及簡單實(shí)例(源碼下載)

獲取實(shí)時(shí)天氣數(shù)據(jù)

查詢您當(dāng)前定位城市的實(shí)時(shí)天氣情況,幫助您合理安排出行。

實(shí)現(xiàn)天氣查詢功能的步驟如下:

1、在頁面的 js 文件中,引入amap-wx.js 文件,實(shí)例化 AMapWX 對象,并調(diào)用 getWeather 方法獲取搜索數(shù)據(jù),代碼如下:

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){
  //成功回調(diào)
  },
  fail: function(info){
  //失敗回調(diào)
  console.log(info)
  }
 })
 }
})

2、編寫頁面的 wxml 文件,搭建頁面結(jié)構(gòu)。

<view class="container">
 <!--定義頁面結(jié)構(gòu),使用文本組件或其他組件 -->
</view>

3、編寫頁面的 wxss 文件,設(shè)置頁面樣式。

.container{
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: #4D8AD7;
 color: #fff;
 font-size: 18px;
 padding-top: 200rpx;
 padding-left: 150rpx;
}
……

示例將天氣情況以文本形式顯示。運(yùn)行程序,效果如下:

微信小程序 高德地圖SDK詳解及簡單實(shí)例(源碼下載)

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

demo下載:

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

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI