vue 調用百度地圖代碼（親測有效）

1.在index.html中放入該連結，此連結是從百度那邊配置而來，我這裡是*，就是接受任何網站，直接複制過去用就可以了

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:
            },
            // 經度
            longitude:{
                type:Number,
                default:
            }
            // ,
            // // 緯度
            // 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,);
            // 資訊窗的配置資訊
            var opts ={
                width :,
                height:,
                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,);
                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>