腾讯位置服务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: 8,
    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 = 0;
     $(".container .smnoprint").siblings().each(function(){
         tempCount++;
         if(tempCount==2 || tempCount==3){
             $(this).remove();
         }
     });
 });

 

 后记

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

　　https://lbs.qq.com/tool/component-geolocation.html