这次老板新接了一个四点半官网页面，使用vue来写。emm……我感觉整个人都不好了，两天半解决了20个静态页面。还好vue写页面简直飞快，遇到一个vue的新坑，使用百度地图。

研究了好一会，总是报错BMap is not defined

我只有一个页面需要用到地图，所以我是使用cdn引入的方式来写的，并没有像网上一些教程一样使用npm引入安装。

直接简单粗暴的根据百度地图api来写，虽然报错。那就解决报错的bug就行了。好了，下面开始说说步骤

在需要页面的处引入cdn：

  1.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

我的是在</template>标签结尾后引用的

在webpack配置里module.exports中加个externals：

 

  1. module.exports = {
  2.   context: path.resolve(__dirname, '../'),
  3.   entry: {
  4.     // app: './src/main.js'
  5.     app: ["babel-polyfill", "./src/main.js"] //引入babel-polyfill 兼容IE
  6.   },
  7.   externals: { "BMap": "BMap" },
  8. }

 

此处依旧报错

接着，使用异步加载

新建一个map.js，里边的内容

  1. export function map(ak) {  
  2.   return new Promise(function (resolve, reject) {  
  3.     window.onload = function () {  
  4.       resolve(BMap)  
  5.     }  
  6.     var script = document.createElement("script");  
  7.     script.type = "text/javascript";  
  8.     script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";  
  9.     script.onerror = reject;  
  10.     document.head.appendChild(script);  
  11.   })  
  12. }

在需要页面import进来，

import {map} from ‘@/map.js’

最后挂载，在css上，记得设置地图盒子宽高，不然显示不出来

  1. mounted () {
  2.       this.$nextTick(function(){  
  3.         var _this = this;  
  4.         MP(_this.ak).then(BMap => {  
  5.           var map = new BMap.Map("allmap");
  6.           var point = new BMap.Point(经纬度,经纬度);
  7.           map.centerAndZoom(point, 19);
  8.           var marker = new BMap.Marker(point);  // 创建标注
  9.           map.addOverlay(marker);              // 将标注添加到地图中
  10.  
  11.           var label = new BMap.Label("公司名字",{offset:new BMap.Size(20,-10)});
  12.           label.setStyle({
  13.                   borderColor : "black"
  14.                   
  15.               });
  16.           //marker.addEventListener("click", function(){    //点击弹出可去掉注释      
  17.               marker.setLabel(label); //开启信息窗口
  18.           //});  //点击弹出可去掉注释         
  20.         })
  21.       })
  22.     },

　　百度地图生成器

　　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

之前写过一篇关于html上引用百度地图的博文：https://www.cnblogs.com/web1/p/8519987.html

　　

 

版权声明：本文为web1原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/web1/p/9106985.html