qq位置如何用启动百度地图定位服务器,腾讯位置服务API快速入门

前言

之前项目有个需求,在网页上显示微信发送过来的位置信息,该开始想用百度地图,后来发现腾讯地图相对简单一点

快速入门

申请Key

9b51f6d253aad66da01d2053e1ff7e1a.png

引入js

把###替换成你申请的key

定义容器

设置好宽高度

设置参数,初始化容器

var center = new qq.maps.LatLng(lat,lng);//lat:纬度 lng:经度(替换成你的经纬度)

var map = new qq.maps.Map($(".container"),{

center: center,

zoom: ,

zoomControl: false,

panControl: false

});

//设置标记

var marker = new qq.maps.Marker({

position:center, //设置Marker的位置坐标

map: map //设置显示Marker的地图

});

marker.setAnimation(qq.maps.MarkerAnimation.DOWN); //从天而降的标记

去掉腾讯地图LOGO

由于腾讯地图的LOGO太碍眼了,所以要干掉它

//去掉腾讯地图logo

$(".container").bind("DOMNodeInserted",function(e){

var tempCount = ;

$(".container .smnoprint").siblings().each(function(){

tempCount++;

if(tempCount== || tempCount==){

$(this).remove();

}

});

});

后记

官网上还给出了前端定位组件,能够更快的获取到你的位置

# 初体验之腾讯位置服务彩云天气开发者api

初体验 最近接触到了boxjs,看到了里面一个比较有意思的彩云天气的脚本,由于自己本身就是彩云天气pro的用户,日常使用过程中感觉到彩云的降雨提醒还是挺方便的,于是就准备开始使用这个天气的脚本. 脚本 ...

Node.js API快速入门

Node.js API 快速入门 一.事件EventEmitter const EventEmitter = require('events'); class MyEmitter extends Ev ...

Html5 学习系列(五)Canvas绘图API快速入门(1)

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

引言:Canvas绘图API快速入门

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

集成腾讯位置服务到webapi

经纬度转换为详细地址信息 参考文档:http://lbs.qq.com/webservice_v1/guide-gcoder.html 首先申请key,如果使用的是服务端请求webservice AP ...

Html5 学习系列(五)Canvas绘图API快速入门(2)

Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...

axis1.4开发webservice服务端(快速入门)-基于jdk1.4

写在前面: 现在有很多开发webservice的方法以及框架,什么cxf等,但是这些在你编写服务类的时候都要用到注解这个功能.如果现在的jdk是1.4的,那么就不能使用注解这个功能了.所以这里可以用到 ...

openstack api快速入门

原文:http://my.oschina.net/guol/blog/105430 openstack官方有提供api供开发者使用,可以使用api做一些外围的小工具,用来简化对openstack的管理 ...

瓜娃《guava》api快速入门

1,大纲 让我们来熟悉瓜娃,并体验下它的一些API,分成如下几个部分: Introduction Guava Collection API Guava Basic Utilities IO API C ...

随机推荐

unity播放视频

方法一: 1.用一个Quad(或者其他的)做屏幕,调整摄像机位置和它的大小,使它显示在你想要的区域 2.将视频拖入Unity,拖入,拖入,拖入:不是将视频直接copy到指定的文件夹中 3.将下面脚本挂 ...

团队作业—第二周—SRS

一.系统整体用例图: 二.用户用例图: 三.医院用例图:

Delphi 取得桌面文件夹的路径和取得我的文档的路径

Uses Windows,Registry; function GetShellFolders(strDir: string): string; const regPath = '\Software\ ...

Spark connect to Database

Cannect to Cassandra: 用spark-cassandra-connector, 注意spark,cassandra和connector的版本要配套,Cassandra至少要版本2以 ...

js+jquery+css3

(原生js+jquery+css3) 前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现 ...

容器中的诊断与分析4——live diagnosis——LTTng

官网地址 LTTng 简介&使用实战 使用LTTng链接内核和用户空间应用程序追踪 简介: LTTng: (Linux Trace Toolkit Next Generation),它是用于跟 ...

用户 'IIS APPPOOL\xxxx' 登录失败

一.现象发布到iis后,网站出现以下提示异常详细信息: System.Data.SqlClient.SqlException: 用户 'IIS APPPOOL\IdealTest' 登录失败. 二.分 ...

Spring 中的事务操作、注解、以及 XML 配置

事务 事务全称叫数据库事务,是数据库并发控制时的基本单位,它是一个操作集合,这些操作要么不执行,要么都执行,不可分割.例如我们的转账这个业务,就需要进行数据库事务的处理. 转账中至少会涉及到两条 SQ ...

java-----遇到问题------myeclipse----发布项目到tomcat中lib文件夹没有子项目产生ClassNotFoundException错误

情况 myeclipse发布项目到tomcat中lib文件夹没有子项目产生ClassNotFoundException错误. 这种情况一般是 .classpath文件设置的输出路径不对导致的. 1.. ...

JMeter之定时器的作用域

定时器的作用域 1.定时器是在每个sampler(采样器)之前执行的,而不是之后(无论定时器位置在sampler之前还是下面): 2.当执行一个sampler之前时,所有当前作用域内的定时器都会被执行 ...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue3 中使用腾讯地图前端定位组件 iframe 监听位置信息,你可以按照以下步骤进行操作: 1. 在 Vue3 中引入腾讯地图前端定位组件 iframe: ```html <template> <div> <iframe src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></iframe> </div> </template> ``` 2. 在 `mounted` 生命周期钩子中监听 iframe 的 `load` 事件,并在事件回调函数中调用腾讯地图前端定位组件的 `getLocation()` 方法,获取位置信息: ```html <template> <div> <iframe ref="mapFrame" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY" @load="onMapLoad"></iframe> </div> </template> <script> export default { mounted() { this.$refs.mapFrame.contentWindow.addEventListener('load', this.onMapLoad); }, methods: { onMapLoad() { const map = this.$refs.mapFrame.contentWindow.qq.maps.Map.getMap(this.$refs.mapFrame); const geolocation = new this.$refs.mapFrame.contentWindow.qq.maps.Geolocation(map); geolocation.getLocation((position) => { console.log(position); }); } } }; </script> ``` 上面的代码中,我们通过 `this.$refs.mapFrame.contentWindow.qq.maps.Map.getMap(this.$refs.mapFrame)` 获取到了地图对象 `map`,然后创建了 `Geolocation` 对象 `geolocation`,并调用了其 `getLocation()` 方法,获取位置信息并在控制台输出。 注意,要使用腾讯地图前端定位组件,需要先在腾讯地图开放平台注册并获取 API Key。在上面的代码中,需要将 `YOUR_KEY` 替换为你的 API Key。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值