vue接入腾讯地图(一)【点击事件】请参考：
https://segmentfault.com/a/1190000023890670
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/my...
官网文档
https://lbs.qq.com/tool/compo...
https://lbs.qq.com/javascript...
以上内容转载自前端来入坑的文章《vue应用腾讯地图（三）标注》链接：https://www.jianshu.com/p/eca...
起源：简书
著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。