init() {
//步骤:定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
//设置地图中心点
var myLatlng = new qq.maps.LatLng(this.longitude, this.latitude);
//定义工厂模式函数
var myOptions = {
zoom: 12, //设置地图缩放级别
center: myLatlng, //设置中心点样式
mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
};
//获取dom元素添加地图信息
var map = new qq.maps.Map(document.getElementById('container'), myOptions);
var polyline = new qq.maps.Polyline({
map:map,
path: this.arr,//一个坐标数组,折线、多边形就是依靠这些坐标数组来成形的
strokeColor:"#28F", //折线颜色
strokeDashStyle:"solid", //折线样式
strokeWeight:20, //折线宽度
editable:false,//折线是否可编辑,即是否可以移动折线中的点,并且可以获取到移动后的位置信息,用事件接受返回值即可qq.maps.event.addListener(polyline,'click',function(res){//res里即包含了位置信息})
clickable:false //是否可点击
});
//给地图添加点击事件
// //并获取鼠标点击的经纬度
// qq.maps.event.addListener(map, 'click', function(event) {
// this.longitude = event.latLng.getLat();
// this.latitude = event.latLng.getLng();
// alert('经度:' + this.longitude + ',' + '纬度:' + this.latitude);
// });
},
dd(){
let arr2 =[]
this.arr1.forEach((item,index) => {
console.log(item);
arr2.push(new qq.maps.LatLng(item.x, item.y))
});
this.arr = arr2
this.init()
}
},
mounted() {
this.init();
}
关于vue中引用腾讯地图api
最新推荐文章于 2024-07-24 22:44:06 发布