腾讯位置服务API快速入门
前言
之前项目有个需求,在网页上显示微信发送过来的位置信息,该开始想用百度地图,后来发现腾讯地图相对简单一点
快速入门
申请Key
https://lbs.qq.com/guides/startup.html

引入js
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=###"></script>
把###替换成你申请的key
定义容器
<div class="container" style='width:200px;height:200px'></div>
设置好宽高度
设置参数,初始化容器
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();
}
});
});
后记
官网上还给出了前端定位组件,能够更快的获取到你的位置
https://lbs.qq.com/tool/component-geolocation.html
腾讯位置服务API快速入门的更多相关文章
- # 初体验之腾讯位置服务彩云天气开发者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 ...
随机推荐
- CentOS 7使用Elasticsearch
安装ElasticSearch 下载依赖 Elasticsearch依赖jdk, 在官网下载jdk压缩包, 或者直接安装. 下载压缩包, 解压tar -xzvf jdk-8u181-linux-x64 ...
- 100天搞定机器学习|Day1数据预处理
数据预处理是机器学习中最基础也最麻烦的一部分内容 在我们把精力扑倒各种算法的推导之前,最应该做的就是把数据预处理先搞定 在之后的每个算法实现和案例练手过程中,这一步都必不可少 同学们也不要嫌麻烦,动起 ...
- vSphere克隆虚机重启网卡报错
使用VMware vSphere克隆虚机,修改IP重启网卡报错: 解决报错: 修改 /etc/udev/rules.d/70-persistent-net.rules 文件,克隆后会多出eth2和et ...
- mysql中TINYINT的取值范围
在MySQL的数据类型中,Tinyint的取值范围是:带符号的范围是-128到127.无符号的范围是0到255(见官方<MySQL 5.1参考手册>http://dev.mysql.com ...
- oralce中的dual详解 转 http://blog.sina.com.cn/s/blog_a5a24bcb0100zeay.html
dual是属于sys的只有一个X varchar2(1)列查询虚拟列不会产生逻辑IO========================================================== ...
- C++ 洛谷P1230 智力大冲浪
题目描述 小伟报名参加中央电视台的智力大冲浪节目.本次挑战赛吸引了众多参赛者,主持人为了表彰大家的勇气,先奖励每个参赛者m元.先不要太高兴!因为这些钱还不一定都是你的?!接下来主持人宣布了比赛规则: ...
- 跟我学SpringCloud | 第十一篇:使用Spring Cloud Sleuth和Zipkin进行分布式链路跟踪
SpringCloud系列教程 | 第十一篇:使用Spring Cloud Sleuth和Zipkin进行分布式链路跟踪 Springboot: 2.1.6.RELEASE SpringCloud: ...
- django基础知识之定义视图:
定义视图 本质就是一个函数 视图的参数 一个HttpRequest实例 通过正则表达式组获取的位置参数 通过正则表达式组获得的关键字参数 在应用目录下默认有views.py文件,一般视图都定义在这个文 ...
- scrapy基础知识之 CrawlSpiders爬取lagou招聘保存在mysql(分布式):
items.py import scrapy class LagouItem(scrapy.Item): # define the fields for your item here like: # ...
- centos7 + Nginx+ HTTPS + uwsgi + python3.6 + Docker + Django1.11 + mysql 5.6 + virtualenv 环境搭建
环境搭建: 系统: centos7.2 x64 开发环境: python3.6 Django 1.11 虚拟环境: [Docker](https://www.runoob.com/dock ...