vue引入使用腾讯地图
// 引入鹅厂地图initMap(lat = 0.0000000, lng = 0.0000000) {// 定义地图中心点坐标-var center = new TMap.LatLng(lat, lng)// 定义map变量,调用 TMap.Map() 构造函数创建地图map = new TMap.Map(document.getElementById('txMapBox'), {center:
·
// 引入鹅厂地图
initMap(lat = 0.0000000, lng = 0.0000000) {
// 定义地图中心点坐标-
var center = new TMap.LatLng(lat, lng)
// 定义map变量,调用 TMap.Map() 构造函数创建地图
map = new TMap.Map(document.getElementById('txMapBox'), {
center: center, // 设置地图中心点坐标
zoom: 16.8, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45, // 设置地图旋转角度
viewMode: '2D'
})
// 初始化marker图层(标记点,即红点)
markerLayer = new TMap.MultiMarker({
id: 'marker-layer',
map: map
})
// 绑定点击事件
map.on('click', evt => {
console.log(evt)
const latb = parseFloat(evt.latLng.lat.toFixed(6))
const lngb = parseFloat(evt.latLng.lng.toFixed(6))
// 点击地图时的操作,存新的点的经纬度
this.postForm.store_longitude = lngb
this.postForm.store_latitude = latb
// 修改地图中心
this.changeCenter(latb, lngb)
// 获取地图标记点(红点)
const arrB = markerLayer.getGeometries()
if (arrB.length > 1) {
const delArr = arrB.map((itemB, index) => {
if (index + 1 < arrB.length) {
return itemB.id
}
})
// 点击新位置,删除旧的位置标记点
markerLayer.remove(delArr)
}
})
},
loadScript() {
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'https://map.qq.com/api/gljs?v=1.exp&key=*****-*****-*****-*****-*****-*****&callback=init'
script.onload = script.onreadystatechange = () => {
if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
// 初始化地图,传入地图中心点经纬度
this.initMap(this.coordinate.lat, this.coordinate.lng)
// 给地图中心点添加标记(红点)
markerLayer.add({
position: new TMap.LatLng(this.coordinate.lat, this.coordinate.lng)
})
script.onload = script.onreadystatechange = null
}
}
document.body.appendChild(script)
},
loadScript的src的key是要去腾讯地图官方申请的
然后在mounted生命周期里调用就是了
补充:map和markerLayer可以先定义;var map; var markerLayer;
更多推荐
已为社区贡献1条内容
所有评论(0)