社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
export function TMap (key) {
return new Promise(function (resolve, reject) {
window.init = function () {
resolve(window.qq)// 注意这里
}
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'https://map.qq.com/api/js?v=2.exp&callback=init&key=这写自己申请的key'
script.onerror = reject
document.head.appendChild(script)
})
}
<div id="container" style="width:1070px;height:450px;"></div>
import { TMap } from '../utils/TXmap'
TMap () {
TMap().then(qq => {
var center = new qq.maps.LatLng(this.datatable[0].workon_latitude, this.datatable[0].workon_longitude)
var map = new qq.maps.Map(document.getElementById('container'), {
// 地图的中心地理坐标
center: center,
// 初始化地图缩放级别
zoom: 11
})
var infoWin = new qq.maps.InfoWindow({
map: map
})
// let latlngBounds = new qq.maps.LatLngBounds()
console.log('latlngBounds')
var thih = this
var marker
for (let i = 0; i < thih.datatable.length; i++) {
marker = new qq.maps.Marker({
position: new qq.maps.LatLng(thih.datatable[i].workon_latitude, thih.datatable[i].workon_longitude),
map: map
})
marker.id = thih.datatable[i].station_id
qq.maps.event.addListener(marker, 'click', function () {
sessionStorage.setItem('particulars', JSON.stringify(thih.datatable[i]))
console.log(thih.datatable[i])
infoWin.open()
// eslint-disable-next-line no-useless-escape
infoWin.setContent(`<div>${thih.datatable[i].station_name} <p>人数: ${thih.datatable[i].workers_num} <button onclick='aaa("${thih.datatable[i].id}")' style='color:red'>查看详情</button></p></div>`)
// 提示窗位置
infoWin.setPosition(new qq.maps.LatLng(thih.datatable[i].workon_latitude, thih.datatable[i].workon_longitude))
})
}
})
}
这是我的页面效果,不懂可以私聊
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!