腾讯地图小程序服务器配置,腾讯地图实现微信小程序地图定位教程

前言

目前腾讯位置服务提供路线规划、地图选点、地铁图、城市选择器插件四款插件产品&＃xff0c;本篇博客主要针对地图选点功能进行实现。

开通腾讯位置服务

2、登录进入小程序后台&＃xff0c;选择 “开发 - 开发工具 - 腾讯位置服务”

4、使用微信扫码进行授权

接入插件

1、在小程序后台&＃xff0c;选择 “设置 - 第三方设置 - 插件管理”&＃xff0c;点击 “添加插件”

开发者密钥配置

2、设置KEY的 “启用产品”

a、勾选微信小程序&＃xff0c;设置授权 APP ID

b、勾选 “WebService API”

"chooseLocation": {

"version": "1.0.5",

"provider": "wx76a9a06e5b4e693e"

}

}

}

2、设置定位授权

地图选点插件需要小程序提供定位授权才能够正常使用定位功能

// app.json

{

"permission": {

"scope.userLocation": {

"desc": "你的位置信息将用于小程序定位"

}

}

}

3、代码实现

a、js代码

"use strict";

const chooseLocation &＃61; requirePlugin(&＃39;chooseLocation&＃39;);

Page({

data: {

address: "",

locationName: ""

},

onShow: function () {

// 从地图选点插件返回后&＃xff0c;在页面的onShow生命周期函数中能够调用插件接口&＃xff0c;取得选点结果对象

// 如果点击确认选点按钮&＃xff0c;则返回选点结果对象&＃xff0c;否则返回null

const location &＃61; chooseLocation.getLocation();

if(location){

this.setData({

address: location.address?location.address : "",

locationName: location.name?location.name : ""

});

}

},

//显示地图

showMap() {

//使用在腾讯位置服务申请的key(必填)

const key &＃61; "";

//调用插件的app的名称(必填)

const referer &＃61; "";

wx.navigateTo({

url: &＃39;plugin://chooseLocation/index?key&＃61;&＃39; &＃43; key &＃43; &＃39;&referer&＃61;&＃39; &＃43; referer

});

}

});

plugin://chooseLocation/index 接口参数说明&＃xff1a;

名称&＃xff1a;{{locationName?locationName:"暂无"}}

4、效果实现