vue接入腾讯地图之标注&定位实战 |
您所在的位置：网站首页 › 户外拖鞋什么材质好穿 › vue接入腾讯地图之标注&定位实战 |
vue接入腾讯地图之标注&定位实战
|
【vue接入腾讯地图之点击事件】，请参考： juejin.cn/post/686958… 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 官网预览lbs.qq.com/javascript_… 为什么会有这么大区别呢，因为这是图片的问题一个大一个小，还需要稍加调整，展示官网定位图片 三步走 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(); } }开发者用的时候可以一步一步去实现，保证每一步都实现后再进行下一步 申请key地址 lbs.qq.com/console/myk… 官方文档 lbs.qq.com/tool/compon… lbs.qq.com/javascript_… 以上内容转载自前端来入坑的文章《vue使用腾讯地图（三）标注》 链接：www.jianshu.com/p/eca4f20ee… 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 |
【本文地址】
今日新闻 |
推荐新闻 |