1. 问题的出现

我们在Vue中使用地图的时候，在首页中引用了百度的api但还是报错,这个问题其实很好解决

2. 解决办法

2.1. 正规方法

在index.html页面中引入百度的API

/*

* index.html

**/

逛吃管理系统

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

修改webpack的配置文件

/*

* 增加externals属性，并把百度用到的对象都导出去

**/

externals: {

"BMap": "BMap",

"BMapLib": "BMapLib"

},

在vue组件中使用的时候直接import进来BMap对象就可以随便使用了

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

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 = '添加区块'

}

}

}

}

.BMapLib_marker,.BMapLib_circle,.BMapLib_polyline,.BMapLib_rectangle {

display: none;

}

.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;

}

}

}

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 就是你的密钥)

#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;

}

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("小吃", "前门")

})

})

}

}

3. 参考和引用

4. 特别感谢

公司的小伙伴

5. 免责说明

本文档中的部分内容摘自网上的众多博客，仅作为自己知识的补充和整理，并分享给其他需要的coder，不会用于商用。

因为很多博客的地址看完没有及时做保存，所以很多不会在这里标明出处，非常感谢各位大牛的分享，也希望大家理解。

如果原文作者感觉不适，可以及时联系我shiguoqing999@163.com,我将及时删除争议部分内容

6. 追责声明

如有大段引用超过全文50%的内容，请在文档结尾标明原文出处：龙马行空-石国庆-朱庇特-https://my.oschina.net/u/1416844/blog，否则将视为抄袭，予以法律追究，请各位尊重个人知识产权。