H5调用腾讯地图
时间:2019-12-11
本文章向大家介绍H5调用腾讯地图,主要包括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
原文地址:https://www.cnblogs.com/wangRong-smile/p/12022147.html
- 简单的客户机服务器投射模拟
- 使用gcc编译gdb调试
- 剑指OFFER之第一个只出现一次的字符(九度OJ1283)
- c++中类长度解析
- 剑指OFFER之丑数(九度OJ1214)
- 剑指OFFER之把数组排成最小的数(九度OJ1504)
- 剑指OFFER之从1到n中出现1的次数(九度OJ1373)
- 剑指OFFER之最大子向量和(连续子数组的最大和)(九度OJ1372)
- 剑指OFFER之最小的K个数(九度OJ1371)
- 剑指OFFER之数组中出现次数超过一半的数字(九度OJ1370)
- 如何成为一名10x的数据分析师?
- 肥料生产商全套三拼在手:拟融资1.47亿元
- 《外媒Cointelegraph专访Qtum量子链Jordan Earls》—浅谈目前Dapps的主要问题
- ASP .Net Core 2.0 修改默认端口
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法