最近项目中使用百度地图:
研究了好一会,总是报错BMap is not defined
![vue项目 调用百度地图 BMap is not defined-青梅煮码](https://i-blog.csdnimg.cn/blog_migrate/aa7603d85fab163e887f05a405756cf9.png)
我只有一个页面需要用到地图,所以我是使用cdn引入的方式来写的,并没有像网上一些教程一样使用npm引入安装。
直接简单粗暴的根据百度地图api来写,虽然报错。那就解决报错的bug就行了。好了,下面开始说说步骤
在需要页面的处引入cdn:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
我的是在</template>标签结尾后引用的
在webpack配置里module.exports中加个externals
module.exports = { context: path.resolve(__dirname, '../'), entry: { // app: './src/main.js' app: ["babel-polyfill", "./src/main.js"] //引入babel-polyfill 兼容IE }, externals: { "BMap": "BMap" },
此处依旧报错
接着,使用异步加载
新建一个map.js,里边的内
export function map(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); }) }
在需要页面import进来, import {map} from '@/map.js'
最后挂载,在css上,记得设置地图盒子宽高,不然显示不出
mounted () { this.$nextTick(function(){ var _this = this; MP(_this.ak).then(BMap => { var map = new BMap.Map("allmap"); var point = new BMap.Point(经纬度,经纬度); map.centerAndZoom(point, 19); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 var label = new BMap.Label("公司名字",{offset:new BMap.Size(20,-10)}); label.setStyle({ borderColor : "black" }); //marker.addEventListener("click", function(){ //点击弹出可去掉注释 marker.setLabel(label); //开启信息窗口 //}); //点击弹出可去掉注释 }) }) }
百度地图生成器
http://api.map.baidu.com/lbsapi/creatmap/index.html
百度地图拾取坐标系统
http://api.map.baidu.com/lbsapi/getpoint/index.html
百度地图JavaScript API
http://lbsyun.baidu.com/index.php?title=jspopular