浏览器端接入百度地图步骤
2023-08-17 本文已影响0人
storyWrite
1.基本步骤
image.png
2.注意点
-
1)百度示例中的例子为 通过一个加载一个js，该js中返回一个匿名函数执行，获取百度地图运行所需要的js与css
但是由于在vue这种三方库中，组件加载时页面不允许异步加载的js，通过document.write，进行覆写页面元素，因为这会把页面清空，因此采用在组件中自己手动加载对应的script脚本
image.png
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>地图单击拾取经纬度</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body,
html,
#container {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
此处为上面js 返回内容
(function() {
window.BMAP_PROTOCOL = "https";
window.BMapGL_loadScriptTime = (new Date).getTime();
document.write('<script type="text/javascript" src="https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=aQKkRVDb56tfNFmVOOPIBUiUohx6j2OY&services=&t=20230810131704"></script>');
document.write('<link rel="stylesheet" type="text/css" href="https://api.map.baidu.com/res/webgl/10/bmap.css"/>');
}
)();
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
map.enableScrollWheelZoom(true);
map.addEventListener('click', function (e) {
alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
});
</script>
3.vue2版本代码
具有功能为地图选点，定位当前地址，搜索地址
- 使用示代码
<template>
<div class="map">
<BaiduMap/>
</div>
</template>
<script>
// 你存放地图组件的位置 即下方地图组件代码存放的位置
import BaiduMap from '../components/BaiduMap/index.vue'
export default {
components: {
BaiduMap
}
}
</script>
<style scoped>
.map {
height: 800px;
width: 100%;
}
</style>
- 地图组件代码
<!-- 百度地图组件>
<template>
<div class="baidu-map-root">
<div :id="mapId" :style="mapStyle" class="baidu-map-container">
</div>
<div class="search">
<div id="r-result">请输入:<input type="text" :id="mapId + 'suggestId'" size="20" value="" style="width:150px;" />
</div>
<div :id="mapId + 'searchResultPanel'" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;">
</div>
</div>
</div>
</template>
<script>
export default {
props: {
// 地图操作回调 map为地图对象 可以进行地图功能的拓展
mapHandler: {
type: Function,
default: (map) => {
},
},
// 地图container的样式
mapStyle: {
type: Object,
default: {}
},
// 是否开启默认配置 获取当前地址控件，搜索地址控件，选点
defaultInitFlag: {
type: Boolean,
default: true
}
},
data () {
return {
map: null,
fileDownloaded: false,
address: {}
}
},
watch: {
address () {
const {
address
} = this
this.$emit('addressChange', { ...address })
}
},
methods: {
async downloadMapFileAndInit (cb) {
await new Promise((resolve, reject) => {
const runFun = () => {
resolve()
this.createMapInstance()
typeof cb === 'function' && cb()
}
// 已经加载过js不再重复加载
if (window._BAIDUMAP_FILEDOWNLOADED) {
// return runFun()
}
let count = 0
const isResole = () => {
count++
if (count >= 2) {
this.fileDownloaded = true
window._BAIDUMAP_FILEDOWNLOADED = true
// 地图所需初始文件加载完成后直接初始化地图
runFun()
}
}
const onerror = () => {
const errMsg = '地图加载失败，请刷新后重试！'
reject(errMsg)
// this.$nav.error(errMsg) 添加自己组件报错提示
}
/* 百度示例的js是返回一个匿名函数执行获取这两个文件并document.write写入，但是此时页面已经存在完整html不能进行write操作
因此此处需要手动执行匿名函数中的内容加载js与css
window.BMAP_PROTOCOL = "https";
window.BMapGL_loadScriptTime = (new Date).getTime();
// document.write('<script type="text/javascript" src="https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=aQKkRVDb56tfNFmVOOPIBUiUohx6j2OY&services=&t=20230810131704">');
// document.write('<link rel="stylesheet" type="text/css" href="https://api.map.baidu.com/res/webgl/10/bmap.css"/>');
*/
window.BMAP_PROTOCOL = "https"
window.BMapGL_loadScriptTime = (new Date).getTime()
const script = document.createElement('script')
const css = document.createElement('link')
script.type = 'text/javascript'
script.src = `https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=${你的AK秘钥}&t=${window.BMapGL_loadScriptTime}`
script.onerror = onerror
script.onload = isResole
css.type = 'text/css'
css.rel = 'stylesheet'
css.href = `https://api.map.baidu.com/res/webgl/10/bmap.css`
css.onerror = onerror
css.onload = isResole
document.head.appendChild(script)
document.head.appendChild(css)
})
},
// 创建地图实例
async createMapInstance () {
const map = new window.BMapGL.Map(this.mapId)
this.map = map
const { mapHandler } = this
map.centerAndZoom(new window.BMapGL.Point(116.404, 39.928), 15)
map.enableScrollWheelZoom(true)
typeof mapHandler === 'function' && mapHandler(map)
},
mapClickHandler (e) {
this.addMarker(this.map, e.latlng)
},
addMapClick () {
this.map.addEventListener('click', this.mapClickHandler)
},
// 添加获取当前地址控件
addGetLocalControll (map) {
// 创建定位控件
let locationControl = new BMapGL.LocationControl({
// 控件的停靠位置（可选，默认左上角）
anchor: BMAP_ANCHOR_TOP_RIGHT,
// 控件基于停靠位置的偏移量（可选）
offset: new BMapGL.Size(20, 20)
})
// 将控件添加到地图上
map.addControl(locationControl)
// 添加定位事件
locationControl.addEventListener("locationSuccess", (e) => {
console.log('e', e)
this.addMarker(this.map, e.point)
})
locationControl.addEventListener("locationError", function (e) {
console.log(e.message)
})
},
// 添加红色标记点
addMarker (map, origiPpoint) {
map.clearOverlays()
let point = new BMapGL.Point(origiPpoint.longitude || origiPpoint.lng, origiPpoint.latitude || origiPpoint.lat)
let marker = new BMapGL.Marker(point, {
enableDragging: true
})
map.centerAndZoom(point, 15)
map.addOverlay(marker)
this.pointTranslateToAddress(point)
},
// 经纬度转换为地址
pointTranslateToAddress (point) {
let geoc = new BMapGL.Geocoder()
geoc.getLocation(point, (rs) => {
let addComp = rs.addressComponents
// 存储经纬度 与 地址
this.address = {
...point,
...addComp
}
})
},
// 添加地址搜索框
addSearchControll (map) {
// 百度地图API功能
function G (id) {
return document.getElementById(id)
}
let ac = new BMapGL.Autocomplete( //建立一个自动完成的对象
{
input: this.mapId + "suggestId"
, location: map
})
ac.addEventListener("highlight", (e) => { //鼠标放在下拉列表上的事件
let str = ""
let _value = e.fromitem.value
let value = ""
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value
value = ""
if (e.toitem.index > -1) {
_value = e.toitem.value
value = _value.province + _value.city + _value.district + _value.street + _value.business
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value
G(this.mapId + "searchResultPanel").innerHTML = str
})
let myValue
ac.addEventListener("onconfirm", (e) => { //鼠标点击下拉列表后的事件
let _value = e.item.value
myValue = _value.province + _value.city + _value.district + _value.street + _value.business
G(this.mapId + "searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue
this.setPlace(myValue)
})
},
// 地图设置地址
setPlace (myValue) {
let map = this.map
map.clearOverlays() //清除地图上所有覆盖物
const myFun = () => {
let pp = local.getResults().getPoi(0).point //获取第一个智能搜索的结果
this.addMarker(this.map, pp)
}
let local = new BMapGL.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
})
local.search(myValue)
},
// 默认功能 地图选点 获取当前位置 搜索地址
defaultInit () {
this.addMapClick()
this.addGetLocalControll(this.map)
this.addSearchControll(this.map)
}
},
created () {
this.mapId = Math.random() + ''
this.downloadMapFileAndInit(this.defaultInitFlag && this.defaultInit)
},
destroyed () {
this.map.removeEventListener('click', this.mapClickHandler)
this.map.destroy()
}
}
</script>
<style>
/* 保证地图搜索下拉选项不被遮盖 */
.tangram-suggestion-main {
z-index: 999;
}
.baidu-map-root {
width: 100%;
height: 100%;
position: relative;
/* 必须有宽高 地图才能正常加载 */
.baidu-map-container {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
.search {
position: absolute;
top: 0;
z-index: 99;
}
}
</style>
