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

vue接入腾讯地图(一)【点击事件】请参考：https://www.cnblogs.com/TencentLBS/p/13613069.html

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

官网预览

为什么会有这么大区别呢，因为这是图片的问题一个大一个小，还需要稍加调整，展示官网定位图片

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

引入js包（注意：vue项目得在首页的index.html里面引入）

<script charset="utf-8" ></script> //这个是固定的用这个链接就可以 <script ></script>

三步走

<template> <div></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

以上内容转载自前端来入坑的文章《vue使用腾讯地图（三）标注》

链接：https://www.jianshu.com/p/eca4f20ee1cb