vue 整合百度地图

1.首先在index.html 引入
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>

  2.在build/webpack.base.conf.js  moudle.exprots 加入如下


   externals: { 'BMap': 'BMap' }, //entry 平级目录

基础使用如下

<!--地图展示-->
<template>
  <div id="allmap"></div>
</template>
<script>
export default {
  name:'',
  data(){
   return{

   }
  },
  mounted() {
    //初始化
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
      mapTypes:[
        BMAP_NORMAL_MAP,
        BMAP_HYBRID_MAP
      ]}));
    map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  }
}
</script>
<style scoped>
  body,
  html,
  #allmap{
    width: 100%;
    height: 600px;
    overflow: hidden;
    margin: 0;
    font-family: "Arial Black";
  }
</style>

猜你喜欢

转载自blog.csdn.net/qq_38233650/article/details/88533144
今日推荐