vue 百度地图

vue项目中引入百度地图

首先在百度地图申请密匙

引用

在index.html中引用

<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=？"></script>

这个问号就是你申请的密匙

调写配置

在build目录下找到 webpack.base.conf.js文件

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  // 百度地图
  externals: {
    app: './src/main.js'
  },
  

和entry同级写上
externals: {
app: ‘./src/main.js’
},
这样配置就完成了呢。

在vue项目中写出一个单独的组件

<template>
    <div class="box">
        <div id="allmap" ref="allmap"></div>
        <!-- <router-view></router-view> -->
    </div>
</template>
<script>
    export default {
 name: 'App',
 methods:{
  map(){
    let map = new BMap.Map("mymap");  
    map.centerAndZoom(new BMap.Point(这里填写经纬度这里填写经纬度), 这里填写经纬度);  
    map.enableScrollWheelZoom();  
    let marker=new BMap.Marker(new BMap.Point(这里填写经纬度,这里填写经纬度));  
    map.addOverlay(marker);  
    let licontent="<b>这里填写地图批注</b><br>";  
        licontent+="<span><strong>地址：</strong>详细批注</span><br>";  
    let opts1 = { width: 300 };  
        
    let  infoWindow = new BMap.InfoWindow(licontent, opts1);  
    marker.openInfoWindow(infoWindow);  
    marker.addEventListener('click',function(){
        marker.openInfoWindow(infoWindow);
    }); 
  }
  
 },
 mounted(){
  this.map()
  
 }
}
</script>
<style scoped>
.box {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}
    #allmap{
        height: 320px;
        overflow: hidden;
        position: relative;
        z-index: 999;
    }
</style>

效果图

然后在需要的页面引入组件就完成了