vue接入腾讯地图(二)【标注定位实战】

vue接入腾讯地图(一)【点击事件】请参考：
https://blog.csdn.net/weixin_45628602/article/details/108401673

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

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

vue接入腾讯地图(二)【标注定位实战】相关推荐

vue接入腾讯位置服务(二)【标注定位实战】
vue接入腾讯位置服务(一)[点击事件]请参考:https://blog.csdn.net/weixin_45653970/article/details/108511378 1.[标注] 添加标注 ...
vue接入腾讯位置服务之标注定位实战
[vue接入腾讯位置服务之点击事件],请参考: https://blog.csdn.net/weixin_45653125/article/details/108466146 1.[标注] 添加标注 ...
Vue - 超详细网站接入腾讯地图的完整流程，提供地图显示、IP 属地定位、地理位置名称、获取经纬度等超多功能示例（可一键复制并运行的功能源代码，详细的注释及常见问题汇总）Nuxt.js 也能用！
前言如果您需要 uniapp 教程,请访问:uniapp - H5 网页接入腾讯地图. 本文站在小白的角度,实现了 Vue.js / Nuxt.js 网站,集成腾讯地图的详细流程及使用方法教程,提供 ...
Vue 引入腾讯地图 API 与实际应用保姆级分享
背景: 需求是大屏要加一个地图板块,同时把获取到的企业信息根据经纬度展示在地图中,并且要求鼠标悬浮打开企业信息的详细信息面板文章目录引入第三方地图组件库页面引入并初始化地图控件显示控制 DOM ...
vue h5 腾讯地图路线规划
vue h5腾讯地图定位传送门代码如下:在微信浏览器中会弹出是否打开第三方点击取消则打开内置腾讯点击去则跳转腾讯地图app location.href = https://apis.map.q ...
vue 集成腾讯地图基础api Demo集合
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记) 写作背景 .之前项目使用腾讯地图,感觉还是比较好用的,但是官方的demo大 ...
腾讯地图实时精准定位
最近写项目的时候遇到一个问题,需要用到实时定位,H5页面怎么实时定位.然后就是各种百度和文档,试用了很多方法,都不太理想,终于找到一个比较中肯的方法. 我用的是腾讯地图,使用的话去腾讯地图注册账号申请 ...
vue使用腾讯地图获取经纬度和逆解析获取详细地址
vue使用腾讯地图获取经纬度和逆解析获取详细地址示例必须在腾讯api中申请自己的key 打开这个webservice用来逆解析详细地址下面是代码 1 , html创建放地图的容器 <div ...
vue 调用腾讯地图 https://apis.map.qq.com/ws/place/v1/suggestion/
vue 调用腾讯地图 1.先安装依赖 npm install jsonp 2. 新建一个jsonp.js 文件 3. 以下代码放到jsonp.js文件里 exports.install = funct ...

vue接入腾讯地图(二)【标注定位实战】

1、【标注】

2、【定位实战→qq.maps.Geolocation】

vue接入腾讯地图(二)【标注定位实战】相关推荐

最新文章

热门文章