vue 调用百度地图代码（亲测有效）

1.在index.html中放入该链接，此链接是从百度那边配置而来，我这里是*，就是接受任何网站，直接复制过去用就可以了

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

1. 地图组建，创建一个页面 BMapComponent.vue ，贴入以下代码：

<template>
    <!--<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>-->
    <!--<div id="allmap":style="{width: '100%', height: mapHeight + 'px'}"></div>-->
    <div id="allmap" v-bind:style="mapStyle"></div>

</template>

<script>

    export default {
        name: "BMapComponent",
        data:function(){
            return{
                mapStyle:{
                    width:'100%',
                    height:this.mapHeight +'px'
                }
            }
        },
        props:{
            // 地图在该视图上的高度
            mapHeight:{
                type:Number,
                default:500
            },
            // 经度
            longitude:{
                type:Number,
                default:116.404
            }
            // ,
            // // 纬度
            // latitude:{
            //     type:Number,
            //     default:39.915
            // },
            // description:{
            //     type:String,
            //     default:'天安门'
            // }
        },

        ready:function(){
            var map =newBMap.Map("allmap");
            var point =newBMap.Point(this.longitude,this.latitude);
            var marker =newBMap.Marker(point);
            map.addOverlay(marker);
            map.centerAndZoom(point,15);
            // 信息窗的配置信息
            var opts ={
                width :250,
                height:75,
                title :"地址：",
            }
            var infoWindow =newBMap.InfoWindow(this.description, opts);// 创建信息窗口对象
            marker.addEventListener("click",function(){
                map.openInfoWindow(infoWindow,point);
            });
            map.enableScrollWheelZoom(true);
            map.openInfoWindow(infoWindow,point);//开启信息窗口
        },
        mounted(){
            var map = new BMap.Map("allmap");
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                var point = new BMap.Point(r.point.lng,r.point.lat);
                map.centerAndZoom(point,12);
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);

                    function myFun(result){
                        var cityName = result.name;
                        map.setCenter(cityName);
                        alert("当前定位城市:"+cityName);
                    }
                }

                else {
                    alert('failed'+this.getStatus());
                }
            });
        }

    }
</script>

<style scoped>

</style>

3.调用地图组件页面如下：

<template>
    <div>
        <b-map-component></b-map-component>
    </div>

</template>

<script>
    import BMapComponent from './BMapComponent';
    export default{
        data() {
            return {

            }
        },
            methods:{
    },
        mounted() {

        },
        created() {


                 },
        components: {
            BMapComponent

        }
    }
</script>

<style scoped>


</style>