客服系统实现类似发送位置功能

地图选点组件
地图选点组件,类似微信中的“发送位置”功能,该组件可以让用户快速、准确地选择并确认自己的当前位置,并将相关位置信息回传给开发者。
调用示例
[图片]

[图片]

调用方式一

通过iframe内嵌调用,地图选点组件的页面会根据开发者设置的iframe宽高自适应。

注:1、使用iframe调用时,为防止在大屏手机上字体过小,需在源码中加入meta信息,<meta name=“viewport” content=“width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>

2、开发者可以在自己的页面里通过iframe内嵌的方式调用该组件的时候,由于存在跨域的问题,需要通过html5 postMessage的方式回传用户选择的位置信息,开发者需要在自己的页面中实现一个监听函数,例如:

<iframe id="mapPage" width="100%" height="100%" frameborder=0src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=your key&referer=myapp"></iframe><script>window.addEventListener('message', function(event) {
        // 接收位置信息,用户选择确认位置点后选点组件会触发该事件,回传用户的位置信息var loc = event.data;
        if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息,需判断module是否为'locationPicker'console.log('location', loc);
        }
    }, false);
</script>

返回的位置信息格式

{
    module:'locationPicker',
    latlng: {
        lat: 39.998766,
        lng: 116.273938
    },
    poiaddress: "北京市海淀区新建宫门路19号",
    poiname: "颐和园",
    cityname: "北京市"
}

调用方式二

通过页面跳转的方式调用该组件的时候,开发者需要设置backurl参数,用户点击选中的位置点后,页面跳转至开发者指定的返回地址(backurl),并将位置信息添加到回跳地址(backurl)上。
例如:https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=http://3gimg.qq.com/lightmap/components/locationPicker2/back.html&key=yourkey&referer=myapp

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/300753.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

听GPT 讲Rust源代码--library/core/benches

File: rust/library/core/benches/slice.rs 文件路径&#xff1a;rust/library/core/benches/slice.rs 这个文件是Rust标准库中的一个示例&#xff08;benchmark&#xff09;文件&#xff0c;用来测试切片&#xff08;slice&#xff09;在不同情况下的性能。 Rust的切片是对数组…

[MySQL] 数据库的主从复制和读写分离

一、mysql主从复制和读写分离的相关知识 1.1 什么是读写分离? 读写分离&#xff0c;基本的原理是让主数据库处理事务性增、改、删操作( INSERT、UPDATE、DELETE) &#xff0c;而从数据库处理SELECT查询操作。数据库复制被用来把事务性操作导致的变更同步到集群中的从数据库。…

1.4 Unity协程

一、先说接口 接口是不能实例化的&#xff0c;想实例化接口&#xff0c;只能实例化继承了接口的类。 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace InterfaceTest {interface IMyInterfa…

Ranger UserSync

作用 同步User到RangerDb 架构 解析 启动一个while(True) 进程定时同步&#xff0c;程序入口 source sink 掉接口获取Ranger User 并且Cache 计算delta 同步

静态网页设计——清雅古筝网(HTML+CSS+JavaScript)

前言 声明&#xff1a;该文章只是做技术分享&#xff0c;若侵权请联系我删除。&#xff01;&#xff01; 感谢大佬的视频&#xff1a; https://www.bilibili.com/video/BV1T64y1K7Zn/?vd_source5f425e0074a7f92921f53ab87712357b 使用技术&#xff1a;HTMLCSSJS&#xff08;…

MybatisPlus—自定义SQL

目录 1. 自定义SQL介绍 2. 自定义SQL使用步骤 3. 自定义SQL实例 4.总结 1. 自定义SQL介绍 介绍&#xff1a;自定义SQL并不是由我们来编写全部SQL语句&#xff0c;而是通过利用MyBatisPlus的Wrapper来构建复杂的Where条件&#xff0c;然后自己定义SQL语句中剩下的部分。 使…

特种印制电路技术

1特种印制电路技术现状、分类及特点 2006年&#xff0c;信息产业部(现工信部)电子信息产品管理司将高档PCB产品类型概括为HDI板、多层FPC、刚挠结合板、IC载板、通信背板、特种板材印制板、印制板新品种等种类。但直至目前&#xff0c;在印制电路设计与制造领域还没有形成特种…

爆肝整理,接口测试+为什么要做接口测试总结,策底贯通...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、什么是接口测试…

面向对象进阶(static关键字,继承,方法重写,super,this)

文章目录 面向对象进阶部分学习方法&#xff1a;今日内容教学目标 第一章 复习回顾1.1 如何定义类1.2 如何通过类创建对象1.3 封装1.3.1 封装的步骤1.3.2 封装的步骤实现 1.4 构造方法1.4.1 构造方法的作用1.4.2 构造方法的格式1.4.3 构造方法的应用 1.5 this关键字的作用1.5.1…

KBDLT2.DLL文件丢失,软件或游戏无法启动,如何解决,试试这些方法,亲测有效

KBDLT2.DLL是Windows操作系统中的一个重要的动态链接库文件&#xff0c;它主要用于支持系统的键盘布局功能&#xff0c;尤其是与立陶宛语相关的键盘布局。 如果KBDLT2.DLL文件缺失或损坏&#xff0c;可能会导致一些问题。例如&#xff0c;当你试图使用立陶宛语键盘布局时&#…

springboot 2.7 oauth server配置源码走读一

springboot 2.7 oauth server配置源码走读 入口&#xff1a; 上述截图中的方法签名和OAuth2AuthorizationServerConfiguration类中的一个方法一样&#xff0c;只不过我们自己的配置类优先级比spring中的配置类低&#xff0c;算是配置覆盖&#xff0c;看下图所示&#xff1a; …

[蓝桥 2020]最长递增

最长递增 题目描述 在数列 a1​,a2​,⋯,an​ 中&#xff0c;如果 ai​<ai1​<ai2​<⋯<aj​&#xff0c;则称 ai​ 至 aj​ 为一段递增序列&#xff0c;长度为 j−i1。 定一个数列&#xff0c;请问数列中最长的递增序列有多长。 输入描述 输入的第一行包含一…

day10 用栈实现队列 用队列实现栈

题目1&#xff1a;232 用栈实现队列 题目链接&#xff1a;232 用栈实现队列 题意 用两个栈实现先入先出队列&#xff08;一个入栈&#xff0c;一个出栈&#xff09;&#xff0c;实现如下功能&#xff1a; 1&#xff09;push&#xff1a;将元素x推到队列末尾 2&#xff09;…

【Python学习】Python学习6-循环语句

目录 【Python学习】【Python学习】Python学习6-循环语句 前言for循环for循环示例通过序列索引迭代循环使用 else 语句 while循环while循环示例continue和 break无限循环循环使用 else 语句简单语句组 嵌套循环Python for 循环嵌套语法&#xff1a;Python while 循环嵌套语法&…

关键字:package关键字

在 Java 中&#xff0c;package关键字用于组织和管理类文件。它将类文件分组到不同的包中&#xff0c;以提供更好的代码组织和可读性。 以下是package关键字的用法&#xff1a; 1.package语句&#xff1a;在 Java 源代码的开头使用package关键字来声明当前类所属的包。例如&a…

【pytorch学习】 深度学习 教程 and 实战

pytorch编程实战博主&#xff1a;https://github.com/lucidrains https://github.com/lucidrains/vit-pytorch

有趣的前端知识(一)

推荐阅读 智能化校园&#xff1a;深入探讨云端管理系统设计与实现&#xff08;一&#xff09; 智能化校园&#xff1a;深入探讨云端管理系统设计与实现&#xff08;二&#xff09; 文章目录 推荐阅读HTML简介基础声明HTML标签标题段落注释水平线文本格式化标签超链接图像<i…

CSS 彩虹按钮效果

<template><view class"content"><button class"btn">彩虹按钮</button></view> </template><script></script><style>body{background-color: #000;}.content {margin-top: 300px;}.btn {width: 1…

python中的异常处理

目录 一&#xff1a;处理机制 二&#xff1a;实例 一&#xff1a;处理机制 Python中的异常处理主要通过try/except语句实现。try语句块包含可能会引发异常的代码&#xff0c;而except语句块包含在try块中发生异常时要执行的代码。此外&#xff0c;Python还提供了一个finally语…

强化学习1——多臂老虎机(上)

在强化学习中&#xff0c;关注智能体在与环境的交互中学习&#xff0c;成为试错型学习。多臂老虎机不存在状态信息&#xff0c;只有动作和奖励&#xff0c;是最简单的“和环境交互中学习“。 什么是多臂老虎机 老虎机_百度百科 (baidu.com) 多臂老虎机即有多个摇杆的老虎机&a…