vue接入腾讯地图(二)【标注&定位实战】
时间:2022-07-24
本文章向大家介绍vue接入腾讯地图(二)【标注&定位实战】,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
vue接入腾讯地图(一)【点击事件】请参考:
https://cloud.tencent.com/developer/article/1692367
1、【标注】
添加标注
var marker = new qq.maps.Marker({
position: myLatlng ,
map: map
});
文本标注
var marker = new qq.maps.Label({
position: myLatlng,
map: map,
content:'文本标注'
});
效果
自定义标注图标
var anchor = new qq.maps.Point(300, 0),
size = new qq.maps.Size(600, 680),
origin = new qq.maps.Point(-150, 0),
markerIcon = new qq.maps.MarkerImage(
"/static/images/position.png",
size,
origin,
anchor
);
marker.setIcon(markerIcon);
预览
定位logo
官网预览https://lbs.qq.com/javascript_v2/case-run.html#sample-overlay-addmarkerimage
为什么会有这么大区别呢,因为这是图片的问题一个大一个小,还需要稍加调整,展示官网定位图片
2、【定位实战→qq.maps.Geolocation】
- 引入js包(注意:vue项目得在首页的index.html里面引入)
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
//这个是固定的用这个链接就可以
<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
三步走
<template>
<div id="container" style="width:600px;height:500px;"></div>
</template>
<script>
export default{
name:'news',
data() {
return {
longitude:0,//经度
latitude:0,//纬度
city:''
}
},
methods:{
//第一部分
//定位获得当前位置信息
getMyLocation() {
var geolocation = new qq.maps.Geolocation("yourkey", "yourkey名称");
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;
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: 13, //设置地图缩放级别
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:'这是我当前的位置,偏差有点大,哈哈'
});
}
},
mounted() {
this.getMyLocation();
}
}
</script>
开发者用的时候可以一步一步去实现,保证每一步都实现后再进行下一步
申请key地址
https://lbs.qq.com/console/mykey.html
官方文档
https://lbs.qq.com/tool/component-geolocation.html
https://lbs.qq.com/javascript_v2/guide-start.html
以上内容转载自前端来入坑的文章《vue使用腾讯地图(三)标注》
链接:https://www.jianshu.com/p/eca4f20ee1cb
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
- golang调试工具Delve
- Git 项目推荐 | 分布式系统唯一 ID 生成方法
- keepalived双机热备nginx
- Git 项目推荐 | 开源 PHP 加密运行扩展
- Git 项目推荐 | 基于 J2Cache 的多级缓存框架
- 如何将生产环境的字段类型从INT修改为BIGINT
- 如何高效的使用PowerShell备份数据库
- Git 项目推荐 | Java 版按键精灵
- Elasticsearch-精确查找
- Git 项目推荐 | 图片验证码生成库
- Elasticsearch-深入理解索引原理
- Git 项目推荐 | html5 异步批量上传插件
- 老司机带你过常规WAF
- Git 项目推荐 | javascript ajax 代理调用工具
- 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 数组属性和方法
- 零基础Python教程045期 元组的增删改查测试实验
- 零基础Python教程044期 列表的函数方法,很耐用!
- 零基础Python教程047期 GUI窗体界面编程,迈出软件开发的第一步
- 零基础Python教程046期 矩阵行列互换算法,二维数组的典型应用
- 有一次小明传数据给我,把我弄哭了
- Java删除空字符:Java8 & Java11
- 6k+点赞的SpringBoot+Netty分布式即时通讯系统!爱了爱了!
- Day63:数据流中的中位数
- Prometheus是什么?
- Day64:滑动窗口的最大值
- 第10天:NLP补充——朴素贝叶斯(Naive-Bayes)
- Day65:矩阵中的路径
- Day66:机器人的运动范围
- 第11天:NLP补充——主题模式(LDA)
- 一文快速上手Rollup,JavaScript类库打包好帮手