前言

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

快速入门

申请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快速入门的更多相关文章

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

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

  2. Node.js API快速入门

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

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

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

  4. 引言:Canvas绘图API快速入门

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

  5. 集成腾讯位置服务到webapi

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

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

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

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

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

  8. openstack api快速入门

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

  9. 瓜娃《guava》api快速入门

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

随机推荐

  1. MySQL优化(一)

    MySQL数据库优化一之引索详解 对于网站优化最注重的就是数据库的优化,而在数据库优化中首先考虑到的应该是数据库索引是否建立于是否建立的正确. 1.对于刚刚接触数据库的程序员,对于引索不是很理解.下面 ...

  2. canvas 画布基本操作

    const canvas = document.getElementById('canvas'); // 2.画笔 --- canvas的上下文对象 const ctx = canvas.getCon ...

  3. C语言类型转换

    int/float to string/array: C语言提供了几个标准库函数,可以将任意类型(整型.长整型.浮点型等)的数字转换为字符串,下面列举了各函数的方法及其说明. itoa():将整型值转 ...

  4. C# Redis分布式锁(基于ServiceStack.Redis)

    相关的文章其实不少,我也从中受益不少,但是还是想自己梳理一下,毕竟自己写的更走心! 首先给出一个拓展类,通过拓展方法实现加锁和解锁. 注:之所以增加拓展方法,是因为合理使用拓展类(方法),可以让程序更 ...

  5. Spring Bean 生命周期之destroy——终极信仰

    上一篇文章 Spring Bean 生命周期之我从哪里来 说明了我是谁? 和 我从哪里来? 的两大哲学问题,今天我们要讨论一下终极哲学我要到哪里去? 初始化 Spring Bean 有三种方式: @P ...

  6. scrapy基础知识之将item 通过pipeline保存数据到mysql mongoDB:

    pipelines.py class xxPipeline(object): def process_item(self, item, spider): con=pymysql.connect(hos ...

  7. SpringBoot 2.0.3 源码解析

    前言 用SpringBoot也有很长一段时间了,一直是底层使用者,没有研究过其到底是怎么运行的,借此机会今天试着将源码读一下,在此记录...我这里使用的SpringBoot 版本是  2.0.3.RE ...

  8. Bzoj3517 翻硬币题解 解异或方程组

    3517: 翻硬币 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 281  Solved: 211[Submit][Status][Discuss] D ...

  9. C语言指针专题——为何要学习指针

    欢迎转发本文! 之前的文章与各位谈论了指针是什么,以及指针为何这那么难学.不少知友留言说看了我的文章对指针了解了不少,这给我继续创作提供了莫大的动力啊.指针其实就是一个纸老虎,你看着可怕,等你了解其本 ...

  10. MyBatis where、set、trim标签的用法

    <!-- 4.3.1 where用法 <where>标签的作用:如果该便签包含的元素中有返回值,就插入一个where:如果 where后面的字符串是一and或or开头的,就将它们剔除 ...