1. 问题的出现
- 我们在Vue中使用地图的时候，在首页中引用了百度的api但还是报错,这个问题其实很好解决
2. 解决办法
2.1. 正规方法
/*
* index.html
**/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逛吃管理系统</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="description" content="逛吃管理系统">
<meta name="keyword" content="餐饮，娱乐">
<link rel="icon" href="/asserts/images/favicon.ico" />
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
<!--百度地图-秘钥-->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=mEBI4fumOXV3HdfdfdNnl903dfdfdfdfrPwI6wtX&s=1"></script>
<!--百度地图-加载鼠标绘制工具-->
<script type="text/javascript" src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"/>
<!--百度地图-加载检索信息窗口-->
<script type="text/javascript" src="https://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css"/>
<!--百度UEditor-->
<script type="text/javascript" src="/asserts/js/UEditor/UE/ueditor.config.js"></script>
<script type="text/javascript" src="/asserts/js/UEditor/UE/ueditor.all.min.js"></script>
<script type="text/javascript" src="/asserts/js/UEditor/UE/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="/asserts/js/UEditor/UE/ueditor.parse.min.js"></script>
</body>
</html>
/*
* 增加externals属性，并把百度用到的对象都导出去
**/
externals: {
"BMap": "BMap",
"BMapLib": "BMapLib"
},
- 在vue组件中使用的时候直接import进来BMap对象就可以随便使用了
<template>
<div>
<div id="allmap" style="width: 100%;height:575px;"></div>
<div class="block">
<div class="s_block">
<p>{{title}}</p>
<h3>{{plase}}</h3>
<button @click="btn_add">{{btn}}</button>
</div>
</div>
</div>
</template>
<script>
import BMap from 'BMap'
import BMapLib from 'BMapLib'
export default{
data(){
return {
title: '目前您并没有区块数据',
plase: '请添加区块',
btn: '添加区块',
pointArr:[]
}
},
mounted(){
this.$nextTick(function () {
let _this = this
//在此调用api
let map = new BMap.Map("allmap") // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
let local = new BMap.LocalSearch(map, {
renderOptions: {map: map, autoViewport: true}
})
//回调获得覆盖物信息
let overlaycomplete = function(e){
let item=[]
let path=e.overlay.getPath()//返回多边形的点数组
for(var i=0;i<path.length;i++){
console.log("lng:"+path[i].lng+"lat:"+path[i].lat)
let obj={}
obj.lng=path[i].lng
obj.lat=path[i].lat
item.push(obj)
}
_this.pointArr.push(item)
console.log(_this.pointArr)
localStorage['mapPoint']=JSON.stringify(_this.pointArr)
}
let BMapPoint1=[]
var polygon = new BMap.Polygon(BMapPoint1, {strokeColor:"#438bd2", strokeWeight:3, strokeOpacity:0.8,strokeStyle: 'dashed'}) //创建多边形
map.addOverlay(polygon) //增加多边形
let styleOptions = {
strokeColor: "#438bd2", //边线颜色。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'dashed' //边线的样式，solid或dashed。
}
//实例化鼠标绘制工具
let drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
},
polygonOptions: styleOptions, //多边形的样式
})
//添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete)
})
},
methods: {
btn_add(){
if (this.btn == '添加区块') {
this.title = ''
this.plase = "请保存添加区块"
this.btn = "保存"
} else {
this.title = '目前您并没有区块数据',
this.plase = '请添加区块',
this.btn = '添加区块'
}
}
}
}
</script>
<style>
.BMapLib_marker,.BMapLib_circle,.BMapLib_polyline,.BMapLib_rectangle {
display: none;
}
</style>
<style lang="scss" scoped>
.block {
width: 318px;
height: 100%;
background: #f2f2f2;
position: absolute;
left: 0;
top: 0;
box-shadow: 3px 3px 3px #ccc;
color: #ccc;
.s_block {
width: 318px;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
text-align: center;
line-height: 30px;
button {
background: #328ff7;
color: #fff;
border: none;
border-radius: 5px;
height: 25px;
cursor: pointer;
}
}
}
</style>
2.2. 非正规方法
export function MP(ak) {
return new Promise(function (resolve, reject) {
window.onload = function () {
resolve(BMap)
}
var script = document.createElement("script")
script.type = "text/javascript"
script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init"
script.onerror = reject
document.head.appendChild(script)
})
}
在你的百度地图页面中调用(ak 就是你的密钥)
<template>
<div class="welcomeContainer">
欢迎使用B2B后台管理系统，如果有bug,请反馈到技术组。
<div id="allmap"></div>
</div>
</template>
<style scoped lang="scss">
#allmap {
height: 600px;
width: 100%;
}
/*不要嵌套太深*/
/*定义内容区域常量*/
$contentWidth: 1200px;
.homeContainer {
overflow-y: visible;
position: static;
> div {
width: 100%;
}
}
.header {
background-color: limegreen;
height: 60px;
}
.main {
position: absolute;
top: 60px;
bottom: 0;
display: flex;
}
.menu {
width: 200px;
background-color: purple;
float: left;
}
.content {
float: left;
flex: 1;
background-color: yellowgreen;
}
</style>
<script>
import {MP} from './map.js'
export default{
data(){
return {
ak: 'xxxxxxI4fumOXV3HW5xUjNnl903rPwI6wtX'
}
},
mounted(){
this.$nextTick(function () {
var _this = this
MP(_this.ak).then(BMap => {
//在此调用api
var map = new BMap.Map("allmap") // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, autoViewport: true}
})
local.searchNearby("小吃", "前门")
})
})
}
}
</script>
3. 参考和引用
4. 特别感谢
5. 免责说明
- 本文档中的部分内容摘自网上的众多博客，仅作为自己知识的补充和整理，并分享给其他需要的coder，不会用于商用。
- 因为很多博客的地址看完没有及时做保存，所以很多不会在这里标明出处，非常感谢各位大牛的分享，也希望大家理解。
- 如果原文作者感觉不适，可以及时联系我[email protected],我将及时删除争议部分内容
6. 追责声明