Vue2.0中引入百度地图

2019独角兽企业重金招聘Python工程师标准>>>

1. index.html中引入百度js:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的key"></script>

    2.Map.vue文件中写:

     

<template>
    <div>
        <div><!--总容器-->
            <h1 class="main-title">北京市新能源汽车充电设施监控中心</h1><!--标题-->
            <div>
                <time class="main-time">2017-10-27 11:22:15</time>
            </div><!--时间,小标题,筛选,桩数量列表,排名 容器-->
            <div id="mapCont"></div><!--地图容器-->
        </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {}
    },
    mounted () {
      this.renderMap()
    },
    methods: {
      renderMap: function () {
        var map = new BMap.Map('mapCont')         // 创建Map实例
        var point = new BMap.Point(116.404, 39.915) // 创建点坐标
        map.centerAndZoom(point, 15)
        map.enableScrollWheelZoom()
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss">
    @import "../common/style/reset.css";
    @import "../common/style/scss/base.scss";

    $mainColor: #418dfd;
    $secondColor: #41d0e0;
    .main-title {
        color: $mainColor;
        font-size: 40px;
        margin-top: 60px;
        text-align: center;
    }

    .main-time {
        margin-top: 8px;
        color: $secondColor;
        float: right;
        font-size: 26px;
        font-family: PUTHIAfont;
    }

    #mapCont {
        border: 4px solid #418dfd;
        height: 900px;
        border-radius: 24px;
    }
</style>

    3.注意点:编译报BMap未定义的话需要将Eslint的语法校验关闭,参考:

     https://jingyan.baidu.com/article/4b52d702b5f490fc5d774b10.html

转载于:https://my.oschina.net/jamesview/blog/1558045