H5调用腾讯地图
获取当前定位的经纬度并在容器内显示当前位置 (安卓上的位置有点偏差)
在vue的index.html中需要引用
template
<div id="container" style="width:600px;height:500px;"></div>
javaScript
<script>
export defalut {
data(){
return {
longitude:0,//经度
latitude:0,//纬度
city:''
}
},
mounted(){
this.getMyLocation(); //腾讯地图定位当前的位置
},
methods: {
//第一部分
//定位获得当前位置信息
getMyLocation() {
var geolocation = new qq.maps.Geolocation("you key", "youkeyname");
//geolocation.getIpLocation(this.showPosition, this.showErr);
geolocation.getLocation(this.showPosition, this.showErr);//或者用getLocation精确度比较高
},
showPosition(position) {
console.log(position);
this.latitude = position.lat;
this.longitude = position.lng;
this.city = position.city;
console.log(this.latitude,'this.latitude',this.longitude,'this.longitude',this.city,'this.city')
this.setMap();
},
showErr() {
console.log("定位失败");
this.getMyLocation();//定位失败再请求定位,测试使用
},
//第二部分
//位置信息在地图上展示
setMap() {
//步骤:定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
//设置地图中心点
var myLatlng = new qq.maps.LatLng(this.latitude,this.longitude);
//定义工厂模式函数
var myOptions = {
zoom: 100, //设置地图缩放级别
center: myLatlng, //设置中心点样式
mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
}
//获取dom元素添加地图信息
var map = new qq.maps.Map(document.getElementById("container"), myOptions);
//第三部分
//给定位的位置添加图片标注
var marker = new qq.maps.Marker({
position: myLatlng,
map: map
});
//给定位的位置添加文本标注
var marker = new qq.maps.Label({
position: myLatlng,
map: map,
content:'这是我当前的位置,偏差有点大,哈哈'
});
}
}
}
</script>
相关文档:
1. 路线规划:https://lbs.qq.com/guides/direction.html
2. 简单地图示例:https://lbs.qq.com/javascript_v2/case-run.html#sample-map
3. 配置密码:https://lbs.qq.com/dev/console/key/manage
4. java根据经纬度查询门店地理位置-完美解决附近门店问题: https://www.cnblogs.com/fuzongle/p/11327688.html
5. 腾讯地图前端定位组件: https://lbs.qq.com/tool/component-geolocation.html
H5调用腾讯地图的更多相关文章
- 微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址
简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...
- Xamarin.Forms 调用 腾讯地图SDK
Xamarin.Forms研究了好一段时间了,最近一直在学习中,想尝试一下调用其他的SDK,就如腾讯地图SDK(申请容易). 完成此次项目得感谢以下链接: http://www.cnblogs.com ...
- uniapp H5引入腾讯地图
在网上搜索了许多关于uniapp引入腾讯地图的方法都以失败告终,我开发的应用主要使用于H5,小程序与H5是不同的sdk,就不在这说了,况且小程序有手把手教学,可参考腾讯地图官网https://lbs. ...
- Xamarin.Forms 调用腾讯地图
用Xamarin.Forms 也有一段时间了,跨平台,生成native代码的噱头 天花乱坠的, 其中的坑,只有用过的人才懂... 就拿地图来说...总不能用google地图吧 于是只能自己想办法了. ...
- C# 调用腾讯地图WebService API获取距离(一对多)
官方文档地址:https://lbs.qq.com/webservice_v1/guide-distance.html 代码: /// <summary> /// 获取距离最近的点的经纬度 ...
- 微信小程序 - 调用腾讯地图插件
1. 登录公众号平台 https://mp.weixin.qq.com/ 2. 设置->第三方服务->添加插件->输入插件名称->申请 3. 项目中使用 3.1 app.jso ...
- uni-app使用腾讯地图注意点
地图map组件使用腾讯地图自定义样式: 1:在使用地图map组件腾讯地图时,获取本地定位,经纬度转地址与地址转经纬度解析时,小程序可以直接使用.但是h5版本会报跨域问题,目前前端没有找到更好的解决方法 ...
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- 百度地图转腾讯地图腾讯地图转百度地图(还有方法二就是使用百度地图api 转火星坐标)
public static double pi = 3.141592653589793 * 3000.0 / 180.0; /** * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转 ...
随机推荐
- struct解决socket黏包问题 (指令传输)
服务端代码如下 import struct import subprocess import socket server = socket.socket() server.bind(()) serve ...
- 【JS学习】慕课网4-1编程挑战 函数
要求:小伙伴们,请编写"改变颜色"."改变宽高"."隐藏内容"."显示内容"."取消设置"的函数,点 ...
- 记录我个人对Telegram的了解
对Telegram(电报) 开始的了解是以为提供了Telegram API,就可以基于它进行开发自己的即时通讯(Instant Messaging)程序. 大概使用过: webogram 和 tele ...
- python制作坦克对战
创建子弹类 import pygame class Bullet(pygame.sprite.Sprite): def __init__(self): pygame.sprite.Sprite.__i ...
- leetcood学习笔记-14*-最长公共前缀
笔记: python if not 判断是否为None的情况 if not x if x is None if not x is None if x is not None`是最好的写法,清晰,不 ...
- python自动化测试-使用第三方python库技术实现
转载自https://www.cnblogs.com/beer/p/5418471.html
- 分布式项目pom
<dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit ...
- Dart编程实例 - 相等和关系操作符
Dart编程实例 - 相等和关系操作符 void main() { var num1 = 5; var num2 = 9; var res = num1>num2; print('num1 gr ...
- bzoj 2084
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2084 这道题很容易想到就是一个变种的最长回文字串, 不过回文的规则变成了s[i + p[i] ...
- (转)OpenFire源码学习之十二:HttpBind&Script Syntax
转:http://blog.csdn.net/huwenfeng_2011/article/details/43417343 HttpSessionManager 该类管理所有通过httpbing连接 ...