微信小程序坐标位置接口使用整理(二)地图接口

微信小程序坐标位置接口使用整理(二)

微信小程序中实现更多地图服务，可以使用腾讯地图Api。

以下几个场景是使用地图Api调用。

官方Api:微信小程序JavaScript SDK | 腾讯位置服务

一、微信小程序中使用腾讯地图Api流程

1.登录腾讯地图官网，申请秘钥

2.下载JavaScriptSDK,到项目中

3.小程序后台，域名白名单，设置request合法域名，添加https://apis.map.qq.com

项目中初始化，使用接口

var QQMapWX = require('../../../utils/qqmap-wx-jssdk.min');
var map = null;

    //初始化map = new QQMapWX({key: 'PNYBZ-XNV36-X64SW-EALEI-2C63E-6MFNJ'});

二、指定位置附近“关键词”搜索

    //指定位置附近“关键词”搜索map.search({keyword: '银行',location: {latitude: '36.656858',longitude: '116.916358'},success: res => {console.info(res);}});

三、逆解析，通过坐标获取，位置名称

    //逆解析，通过坐标获取，位置名称map.reverseGeocoder({location: {latitude: '36.656858',longitude: '116.916358'},success: res => {console.info(res);}});

四、解析，获取位置对应的坐标

    //解析，获取位置对应的坐标，济南市槐荫区经十路乐梦中心3号楼3103室map.geocoder({address:'济南市槐荫区经十路乐梦中心3号楼3103室',success:res=>{console.info(res);}});

五、使用地图，路线规划

  //使用地图，路线规划map.direction({// mode: 'driving',from: {latitude: '36.656858',longitude: '116.916358'},to: {latitude: '36.440819',longitude: '116.016219'},success: res => {console.info(res);}});

注意：此处接口是获取规划路线的数据。如果想展示路线规划，请使用腾讯地图小程序组件或者polyline 坐标解压。

polyline 坐标解压，展示路线到map组件：

<map longitude="{{mapinfo.longitude}}"
latitude="{{mapinfo.latitude}}"
scale="12"
polyline="{{polyline}}"
show-location></map>

    //使用地图，路线规划var _this = this;map.direction({// mode: 'driving',from: {latitude: '36.656858',longitude: '116.916358'},to: {latitude: '36.440819',longitude: '116.016219'},success: res => {console.info(res);var coors = res.result.routes[0].polyline;var mapPolyline = [];//坐标解压（返回的点串坐标，通过前向差分进行压缩）var kr = 1000000;for (var i = 2; i < coors.length; i++) {coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;}//将解压后的坐标放入点串数组pl中for (var i = 0; i < coors.length; i += 2) {mapPolyline.push({latitude: coors[i],longitude: coors[i + 1]})}// console.info(mapPolyline);_this.setData({['polyline']:[{points: mapPolyline,color: '#00ff00',width: 4}]});}});this.setData({mapinfo: {latitude: '36.656858',longitude: '116.916358'}});

展示结果：

微信小程序switch 样式重写

小程序Image组件长按识别支持的码

微信小程序坐标位置接口使用整理(二)地图接口相关推荐

uni-app 微信小程序获取位置信息提示“getLocation 需要在 app.json 中申明 permission 字段”
本文同步发布在:uni-app 微信小程序获取位置信息提示"getLocation 需要在 app.json 中申明 permission 字段我们在用 uni-app 开发微信小程序时, ...
微信小程序：强大多流量主自带接口短视频去水印工具箱微信小程序
这是一款强大的去水印组合的微信小程序源码内已被小编支持多种热门流量主如:激励视频,插屏,视频广告等等激励视频解锁下载无水印小视频,图集等另外功能也是特别的强大,如下: 短视频去水印(几十家平台 ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
最新中国福彩分析大数据分析大师拥有双色球数据展示微信小程序源码支持双色球数据分析多个接口
demo软件园每日更新资源,请看到最后就能获取你想要的: 1.最新中国福彩分析大数据分析大师拥有双色球数据展示微信小程序源码支持双色球数据分析多个接口福彩大数据分析小程序,数据来自于中国福利彩票拥 ...
基于spring-boot的社区社交微信小程序，适合做脚手架、二次开发
代码地址如下: http://www.demodashi.com/demo/13867.html 1 概述笔者做的一个后端基于spring-boot的社区社交微信小程序,可以作为开发的脚手架,开发速 ...
微信小程序开发-仿今日头条（二）
该仿今日头条的文章系列如下: 微信小程序-仿今日头条客户端微信小程序开发-仿今日头条(二) 转载请标明:https://blog.csdn.net/yangjianbo456/article/det ...
【微信小程序】开发入门篇（二）
前言 ❤️ 所谓信仰,可能就是在人们一无所剩的时候仅有的那种东西 ❤️ [微信小程序]开发入门篇(二) 一.小程序的宿主环境 (1)宿主环境简介 1.1 什么是宿主环境 1.2 小程序的宿主环境 (2 ...
微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
微信小程序云开发初学者入门教程二
微信小程序云开发初学者入门教程二-前端操作数据库模块如何操作数据库,作为一名前端,如果对数据的知识不够熟悉也没关系,从现在开始好好学习就行,数据库的操作内容差不多涉及增删改查四大模块,花一些业余的 ...

微信小程序坐标位置接口使用整理(二)地图接口

polyline 坐标解压，展示路线到map组件：

微信小程序坐标位置接口使用整理(一)

微信小程序switch 样式重写

小程序Image组件长按识别支持的码

微信小程序坐标位置接口使用整理(二)地图接口相关推荐

最新文章

热门文章