vue接入腾讯地图(一)【点击事件】请参考:https://juejin.im/post/6868479028777484301
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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。