<!DOCTYPE html>
<html lang="en" style="height: 100%;width: 100%;margin: 0;padding: 0;">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="height: 100%;width: 100%;margin: 0;padding: 0;">
<script>
window.onload = function() {
// get 请求接口
function fooGet() {
let url = ''
//第一步：建立所需的对象
let httpRequest = new XMLHttpRequest()
//第二步：打开连接 将请求参数写在url中
httpRequest.open('GET', url, true)
//第三步：发送请求 将请求参数写在URL中
httpRequest.send()
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
var res = JSON.parse(httpRequest.responseText) //获取到json字符串，还需解析
if (res.isSuccess) {
// console.log(res.data.jsKey)
baiduKEY(res.data.jsKey)
}
}
}
}
fooGet()
}
function baiduKEY(akData) {
window.BMap_loadScriptTime = new Date().getTime()
const BMap_URL = 'https://api.map.baidu.com/getscript?v=3.0&ak=' + akData
document.write('<div id="b-map" style="height: 100%"></div><script type="text/javascript" src="' + BMap_URL + '"><\/script>')
}
</script>
</body>
</html>
vue 页面嵌套 iframe 使用百度地图
<template>
<iframe class="b-map" :src="`${prefix}/map.html`" scrolling="no" ref="map"></iframe>
</template>map.vue
<template>
<iframe class="b-map" :src="`${prefix}/map.html`" scrolling="no" ref="map"></iframe>
</template>
<script>
export default {
props: {
page: String,
buildingProjectFlag: Boolean
},
data() {
const isload = location.hostname === 'localhost'
return {
zoom: 5,
prefix: isload ? '' : '/roc-component-workbench',
// baiduAk: ''
// markerRed: require('@/assets/img/mark-red.png'),
// markerBlue: require('@/assets/img/mark-blue.png')
}
},
computed: {
randomId() {
return Math.floor(Math.random() * (999999 - 100000) + 100000);
}
},
created() {
},
mounted() {
const _this = this
setTimeout(() => {
_this.initMap(_this.$refs.map)
_this.drawMap()
}, 500);
this.hook = 'mounted'
},
activated() {
this.hook = 'activated'
const _this = this
setTimeout(() => {
_this.initMap(_this.$refs.map)
_this.drawMap()
}, 500);
if (!this.hasMap) {
this.$emit('load', 'mounted')
}
},
deactivated() {
if (this.map) {
this.isload = false
this.map = null
}
},
beforeDestroy() {
if (this.map) {
this.isload = false
this.map = null
}
},
methods: {
// 初始化地图
initMap(iframe = {}) {
// 异步加载百度地图
this.mapReady = new Promise((resolve, reject) => {
const target = iframe.contentWindow || window
if (target.BMap) {
this.hasMap = true
resolve(target.BMap)
return
}
iframe.onload = function () {
this.hasMap = true
resolve(target.BMap)
}
})
// 获取已有的map对象
this.getMap = (function () {
var map = null
var BMap = null
return function (dom, cb, errFn) {
if (!map) {
this.mapReady.then(bmap => {
if (dom.nodeName === 'IFRAME') {
const doc = dom.contentWindow.document
let el = doc.querySelector('#b-map');
if (!el) {
el = doc.createElement('div')
el.setAttribute('id', 'b-map')
el.setAttribute('style', 'height: 100%')
doc.body.appendChild(el);
}
map = new bmap.Map(el)
} else {
map = new bmap.Map(dom)
}
BMap = bmap
cb({ map, BMap })
}).catch(err => {
console.log(err, 84)
if (errFn) {
errFn()
}
})
} else {
cb({ map, BMap })
}
}
})()
},
//地图事件设置函数：
setMapEvent(map) {
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
},
// 绘制地图
drawMap(address) {
return new Promise((resolve, reject) => {
this.getMap(this.$refs.map, ({ map, BMap }) => {
if (!address) {
address = new BMap.Point(116.4035, 39.915)
}
const topLeftNavigation = new BMap.NavigationControl({ anchor: 2 }); //左下角，添加默认缩放平移控件
map.addControl(topLeftNavigation)
map.centerAndZoom(address, this.zoom);
map.panBy(180, 0)
map.enableScrollWheelZoom(true) // 启用滚轮放大缩小，默认禁用
map.enableContinuousZoom() // 启用地图惯性拖拽，默认禁用
const el = document.querySelector('.home-wrap')
map.addEventListener('zoomstart', () => {
if (el) el.style.overflow = 'hidden'
})
map.addEventListener('zoomend', () => {
if (el) el.style.overflow = 'auto'
})
this.map = map
this.isload = true
resolve({ map, BMap })
this.$emit('load', this.hook)
}, () => { this.$emit('load', 'mounted') })
})
},
resetView(address) {
this.getMap(this.$refs.map, ({ map, BMap }) => {
if (!address) {
address = new BMap.Point(116.4035, 39.915)
}
this.clearOverlays(true)
setTimeout(() => {
map.centerAndZoom(address, this.zoom);
map.panBy(180, 0)
}, 100)
})
},
// 自定义遮盖物
customOverlay(BMap, mp) {
// 复杂的自定义覆盖物
function ComplexCustomOverlay(point, { text, label }) {
this.point = point;
this._text = text;
this._label = label
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function (map) {
this._map = map;
const wrap = this._wrap = document.createElement("div");
wrap.setAttribute('class', 'use-marker')
const div = this._div = document.createElement("div");
var _labelEl = this._labelEl = document.createElement("div");
_labelEl.setAttribute('class', 'use-marker-label')
_labelEl.style.position = "absolute";
_labelEl.style.display = "none";
_labelEl.style.background = "#fff";
_labelEl.style.padding = "6px 10px";
_labelEl.style.fontSize = "14px";
_labelEl.style.position = "absolute";
_labelEl.style.top = "-8px";
_labelEl.style.right = "0";
_labelEl.style.transform = "translateY(-100%)";
_labelEl.style.whiteSpace = "nowrap";
_labelEl.style.zIndex = BMap.Overlay.getZIndex(this.point.lat);
_labelEl.innerHTML = this._label
wrap.style.position = "absolute";
wrap.style.width = "33px";
wrap.style.height = "24px";
wrap.style.zIndex = BMap.Overlay.getZIndex(this.point.lat);
div.setAttribute('class', 'use-marker-content')
// console.log(div);
div.style.backgroundImage = `url('data:image/png;base64,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')`
div.style.backgroundSize = "100% 100%";
div.style.backgroundRepeat = "no-repeat";
div.style.height = "100%";
div.style.color = "#fff";
div.style.textAlign = "center";
div.style.lineHeight = "20px";
div.style.whiteSpace = "nowrap";
div.style.cursor = "pointer";
div.style.fontSize = "12px";
div.style.userSelect = "none";
div.style.zIndex = BMap.Overlay.getZIndex(this.point.lat);
// div.style.backgroundImage = `url(${this._icon})`;
var span = this._span = document.createElement("span");
div.appendChild(span);
wrap.appendChild(div);
wrap.appendChild(_labelEl);
span.appendChild(document.createTextNode(this._text));
const _this = this
div.onclick = function (e) {
e.stopPropagation()
e.preventDefault()
if (_this.onClick) {
_this.onClick(_this)
}
}
mp.getPanes().labelPane.appendChild(wrap);
this._wrap.onmouseover = function () {
_labelEl.style.display = "block";
};
this._wrap.onmouseout = function () {
if (wrap.classList.contains('use-active')) {
_labelEl.style.display = "block";
div.style.backgroundImage = `url('data:image/png;base64,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')`
// console.log(_labelEl);
} else {
_labelEl.style.display = "none";
}
};
return wrap;
}
ComplexCustomOverlay.prototype.draw = function () {
var map = this._map;
var pixel = map.pointToOverlayPixel(this.point);
this._wrap.style.left = pixel.x + "px";
this._wrap.style.top = pixel.y - 30 + "px";
}
ComplexCustomOverlay.prototype.setActive = function (bool) {
if (bool) {
this._wrap.classList.add('use-active')
} else {
this._wrap.classList.remove('use-active')
}
if (this._wrap.classList.contains('use-active')) {
this._labelEl.style.display = "block";
} else {
this._labelEl.style.display = "none";
}
}
return ComplexCustomOverlay
},
// 添加标记
drawMarker(points) {
// console.log(points)
const _this = this
this.getMap(this.$refs.map, ({ map, BMap }) => {
const ComplexCustomOverlay = this.customOverlay(BMap, map)
// const img = this.markerRed
const markers = [];
points.forEach((item, index) => {
// 指定marker标记所在的地理位置
const position = new BMap.Point(...item.point)
const marker = new ComplexCustomOverlay(position, { text: item.text, label: item.title })
// 设置自定义属性content，作为索引用
marker.content = item.text
if (item.id) {
marker.id = item.id
}
// 添加事件监听函数
marker.onClick = function (target) {
_this.$emit('map-click', { target })
}
markers.push(marker)
})
_this.markers = markers
markers.forEach(marker => {
// 将标注添加到地图
map.addOverlay(marker);
})
})
},
// 根据坐标点获取marker
getMarker(point) {
const { markers } = this
if (!markers) return
return new Promise((resolve, reject) => {
this.getMap(this.$refs.map, ({ BMap }) => {
const po = new BMap.Point(...point)
for (let i = 0; i < markers.length; i++) {
if (po.equals(markers[i].point)) {
resolve(markers[i])
return
}
}
reject('未找到')
})
})
},
// 根据序号获取marker
getMarkerByOrder(order) {
const { markers } = this
if (!markers) return
return new Promise((resolve, reject) => {
for (let i = 0; i < markers.length; i++) {
if (this.buildingProjectFlag) {
if (markers[i].id === order) {
resolve(markers[i])
return
}
} else {
if (markers[i].id === order) {
resolve(markers[i])
return
}
}
}
reject('未找到')
})
},
// 设置地图坐标标记样式
// target 要设置样式的标记
// move 是否将地图中心移动至 target
setMarkStyle(target, move) {
console.log('地图标记', target);
this.getMap(this.$refs.map, ({ map, BMap }) => {
if (this.target) {
// 标记图标
this.target.setActive(false)
}
if (target) {
// 标记图标
// this.target.setActive(true)
target.setActive(true)
this.target = target
move && this.panTo(target.point)
}
})
},
// 逆向地址解析 address 详细地址，city 所在城市
getPoint(address, city = '') {
return new Promise((resolve, reject) => {
this.getMap(this.$refs.map, ({ map, BMap }) => {
// 创建地址解析器实例
const geo = new BMap.Geocoder();
// 将地址解析结果返回
geo.getPoint(address, function (point) {
if (point) {
resolve(point)
}
}, city);
})
})
},
// 调整地图视野
setViewport(boundary) {
console.log('setViewport')
return new Promise((resolve, reject) => {
this.getMap(this.$refs.map, ({ map, BMap }) => {
const bd = new BMap.Boundary();
bd.get(boundary, function (rs) {
const count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
return;
}
let pointArray = [];
for (let i = 0; i < count; i++) {
const ply = new BMap.Polygon(rs.boundaries[i]); //建立多边形覆盖物
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray, {
margins: [30, 20, 20, 20]
}); //调整视野
});
})
})
},
// 改变地图聚焦点
panTo(point) {
this.getMap(this.$refs.map, ({ map, BMap }) => {
if (point) {
point = new BMap.Point(point.lat, point.lng)
}
map.panTo([point.lat, point.lng])
// map.zoomIn() //放大一级视图
// map.setCenter([point.lat, point.lng]);
map.centerAndZoom(new BMap.Point(point.lat, point.lng), 6)
map.centerAndZoom(new BMap.Point(point.lat, point.lng), 15)
// map.zoomIn()
// map.zoomIn()
})
},
// 清除地图覆盖物
clearOverlays(doClear = true) {
return new Promise((resolve, reject) => {
this.getMap(this.$refs.map, ({ map, BMap }) => {
doClear && map.clearOverlays()
resolve({ map, BMap })
})
})
},
// 点亮省/城市区域
async drawBoundary(area, doClear = false) {
const { map, BMap } = await this.clearOverlays(doClear)
if (typeof area === 'string') {
this.addBoundary({ map, BMap }, area)
} else if (Array.isArray(area)) {
for (let i = 0; i < area.length; i++) {
this.addBoundary({ map, BMap }, area[i])
}
}
},
// 添加行政区划
addBoundary({ map, BMap }, boundary) {
if (!boundary) return
const bd = new BMap.Boundary();
bd.get(boundary, function (rs) {
console.log('====rs===')
console.log(rs)
const count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
console.log('未能获取当前输入行政区域');
return;
}
let pointArray = [];
for (let i = 0; i < count; i++) {
const ply = new BMap.Polygon(rs.boundaries[i],
{ strokeWeight: 2, strokeStyle: 'solid', fillColor: "#027AFF", fillOpacity: 0.1, strokeColor: "#027AFF" }); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
// map.setViewport(pointArray); //调整视野
});
},
}
}
</script>
<style lang="scss" scoped>
.b-map {
width: 100%;
height: 100%;
border: none;
}
</style>
1288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
