1. 程式人生 > >微信小程式使用騰訊地圖sdk

微信小程式使用騰訊地圖sdk

騰訊地圖提供了供小程式使用的SDK,可結合地圖元件和api進行快速呼叫,訪問地址為http://lbs.qq.com/qqmap_wx_jssdk/index.html。首次使用需要申請祕鑰,下載sdk檔案qqmap-wx-jssdk.js。需要設定安全域名https://apis.map.qq.com

index.wxml檔案如下

<view><text>經度{{jd}}</text></view>
<view><text>緯度{{wd}}</text></view>
<view><text>地點{{address}}</text></view>


index.js檔案如下

  1. varQQMapWX= require('../libs/qqmap-wx-jssdk.js');
    var qqmapsdk;
    Page({
     data:{
       },
     onLoad:function(options){
       qqmapsdk =newQQMapWX({
         key:'22VBZ-REEK5-WVSI7-QKCOP-QPM6E-W7BPO'
       });
     },
     onReady:function(){
       var that=this
       wx.getLocation({
         type:'wgs84',
         success:function(res){
           console.log(res)
           var latitude1= res.latitude
           var longitude1= res.longitude
           qqmapsdk .reverseGeocoder({
               location:{
                 latitude: latitude1,
                 longitude: longitude1
               },
               success:function(res){
                 console.log(res);
                 var add= res.result.address
                 that.setData({
                   wd: latitude1,
                   jd: longitude1,
                   address: add
                 })
               }
           });
         }

在這裡呼叫了逆地理解析reverseGeocoder,對地理解析結果讀取獲取當前位置

獲取當前位置 真的有這樣一個小程式,你可以搜一下。都說小程式上線很難,看到這個是不是覺得很簡單。

相關推薦

程式-地圖顯示偏差問題

背景 在小程式中使用map元件,可以呼叫騰訊地圖的API,將一些固定的點標記到地圖介面上,點的經緯度獲取是通過android端百度地圖API獲取的,所以此時將這個位置點資訊直接設定上去會出現偏差,而且偏差還比較大 小程式設定位置點 關於如何在map元件上設定位置點,詳細請檢視騰訊官方文件 首先

程式-雲PHP模板-Error: 響應錯誤,{"code":-1,"error":'root'@'localhost' (using password: YES)"}-排坑2

        Error: 響應錯誤,{"code":-1,"error":"SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES)"}

【學習筆記】程式雲部署之新手問題點

2017年8月31號微信小程式團隊釋出新的開發者工具1.01.170831,這幾天差不多把前端頁面設計有了大概的瞭解,正發愁怎麼設計後臺資料互動,新工具就來了。以下是設定介紹。 官方連結[https:

程式雲nodejs啟動模板demo記錄

一、第一次使用先下載騰訊雲上的測試程式碼放到自己的專案裡,我第一次開發工具是沒有啟動模板選項的,之後有直接建立的選項了。 二、修改的地方 三、上傳測試程式碼。 做到這本以為OK了,但發現還

程式開發(2)——地圖定位、地圖滑動、建立路線等

1.地圖的使用 在wxml檔案中使用地圖,動態設定中心點位置和地圖大小等資訊。 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" contro

程式如何顯示地圖並設定全屏

微信小程式在介面上顯示地圖,你只需要用map標籤即可: <map longitude="經度度數" latitude="緯度度數"></map> 例如北京的經緯度為:116.46,39.92 <map class="bgMap" longi

程式之map地圖

微信小程式地圖操作比較簡單,api也很少,使用map元件來展示。說到地圖,那就先來看基礎定位: 定位用到wx.getLocation(OBJECT)函式,程式碼如下: wx.getLocation({ type: 'wgs84', success:

程式---高德地圖API

本文章介紹微信小程式呼叫高德地圖API的過程,使用高德定位功能做演示。 微信小程式目前支援百度地圖、高德地圖、騰訊地圖。用法可以說是基本完全一樣,本文章以高德為例,簡單說一下他們的區別,高德地圖精度應該是最準確的,畢竟本來就是做地圖出生的。百度地圖的精度目前較高德而言,還是要稍稍欠缺一

程式中實現地圖導航

<map id="map" longitude="116.715790" latitude="23.362490" markers="{{markers}}" scale="18" style="width: 100%; height: 300px;" bindta

程式-路線規劃,地圖導航功能基於高德地圖API

主要實現微信小程式中的地圖路線規劃和地圖導航功能 小程式二維碼: 更新  2018年4月18日:新增限行限號查詢。 2018年5月7日:新增快遞查詢,模板訊息傳送。 準備 2、在微信小程式後臺把restapi.amap.com新增進request合法域名

程式開發——map地圖元件,定位,並手動修改位置偏差。

環境搭建 註冊,獲取APPID(沒有這個不能真雞除錯) 下載微信web開發者工具(挺多bug,將就用) 開啟微信web開發者工具,掃碼登入,新建小程式,輸入APPID,勾選建立quick start專案。 工程結構 可以看到工程根目錄中有個app.

mpvue 引入提供的的程式地圖 JavaScript SDK

  使用mpvue開發微信小程式時 常常會用到地圖  微信小程式原生的地圖元件功能不夠強大 為提供更加強大的微信小程式地圖功能 騰訊和百度都提供了對應的第三方外掛 下面介紹mpvue中如何引入騰訊提供的微信小程式 javascr

程式使用地圖sdk

騰訊地圖提供了供小程式使用的SDK,可結合地圖元件和api進行快速呼叫,訪問地址為http://lbs.qq.com/qqmap_wx_jssdk/index.html。首次使用需要申請祕鑰,下載sdk檔案qqmap-wx-jssdk.js。需要設定安全域名https:

地圖程式外掛:提供簡單的路線多方案規劃服務

上期,我們在《「騰訊視訊」微信小程式外掛介紹》一文中介紹了「騰訊視訊」小程式外掛的意義、使用場景以及使用方法。 今天我們會與大家分享一款同樣優秀的小程式外掛——「騰訊地圖」外掛,從使用場景到使用方法,都將作出詳細的介紹。 「騰訊地圖」外掛能做什麼? 顧名思義,「

如何在程式中呼叫地圖api

微信小程式的地圖api是非常有限的,如果要搜尋地圖上的位置,比如附近的醫院、學校等,就需要使用地圖api,使用騰訊地圖api的過程如下:一、開發者申請騰訊地圖驗證完手機郵箱之後,就可以申請開發者金鑰    並解壓,然後將其解壓放入你的微信小程式開發目錄的util中,這個壓縮檔

程式整合雲 IM SDK

微信小程式整合騰訊雲 IM SDK 1、背景   因業務功能需求需要接入IM(即時聊天)功能,一開始想到的是使用 WebSocket 來實現這個功能,然天意捉弄(哈哈)伺服器版本太低不支援 wx 協議(也就不支援 WebSocket了)不得不尋找第三方服務了,因客戶端目前採用微信小程式來開發,那想到的肯定

程式--21雲伺服器配置-nodejs版本

https://cloud.tencent.com/ 雲產品-微信小程式 關聯微信小程式 組織上傳程式碼   程式碼結構大概是這樣        然後再智

程式使用雲PHP啟動模板時兩個錯誤

一:Error: 響應錯誤,{"code":-1,"error":"`QcloudSecretId`不能為空,請確保 SDK 配置已正確初始化"}     在按照官方文件給出的步驟一步步完成“騰訊雲PHP啟動模板”後,發現登入時會出現這個問題。    

使用高德地圖程式SDK開發案例-輸入提示(附原始碼)

閒來無事寫一篇使用高德地圖的微信小程式SDK開發應用的例項。 接下來先看需求: 我們要做的是,根據使用者輸入的關鍵詞,給出相應的提示資訊,列表中顯示地方的名稱,地方的詳細地址以及對應的經緯度座標。 當然在UI上我們儘量做到理想的視覺與較好的使用者體驗。 最終的效果我們希望是像這樣的,

Atitit 程式的部署流程文件 目錄 1.1. 設定https 參照 Atitit tomcat linux 常用命令 1 1.2. 增加證書 雲和阿里雲都可申請免費證書,但要一天

Atitit 微信小程式的部署流程文件   目錄 1.1. 設定https  參照 Atitit tomcat linux 常用命令 1 1.2. 增加證書   騰訊雲和阿里雲都可申請免費證書,但要一天稽核  可以淘寶購買證書快速寫