vue使用百度地图

 

 

   vue中提供了丰富的插件供开发者迅速开发，因为需要做百度地图，根据官网的vue-baidu-map,自己做了一个小demo,整合了一下常用的功能，官网地址https://dafrok.github.io/vue-baidu-map/#/zh/index。

 

     

1:first of all 工具善其事必先利器，得去百度的开发者账号去获取访问应用的key

                                                   

2:second用伟大的npm去执行

npm install vue-baidu-map --save

3:可以进行全局引用和局部引用，如果在项目中用到地图的地方比较多建议全局引用，如果比较少们可以进行局部引用，下面我采用局部引用

下面是我做的例子的效果图，包括在地图上画点，点击显示信息，自定义图标，隐藏百度logo等常用功能，唯一想要实现的功能却一直没有解决的是，怎么样只显示中国区域其余的各个国家的区域隐藏掉，我也考虑过覆盖，但是始终达不到自己想要的效果，下面是我的例子截图，仅供参考，大神莫喷。

代码也不多，还是悄悄地附上代码吧，也方便以后自己查阅。

<template>
    <div id="container">
        <el-container style="width: 800px;height: 800px;">
            <el-header>
                <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置"></el-input>
            </el-header>
            <!-- 给地图加点击事件getLocationPoint，点击地图获取位置相关的信息，经纬度啥的 -->
            <!-- scroll-wheel-zoom：是否可以用鼠标滚轮控制地图缩放，zoom是视图比例 -->
            <el-main>
                <baidu-map
                        :mapStyle="mapStyle"
                        :scroll-wheel-zoom="true"
                        :center="location"
                        :zoom="zoom"
                        :auto-resize="true"
                        @click="getLocationPoint"
                        ak="daapAgRG5N4EXaDqiL5GMML0IBe18cjK"
                        style="width: 100%;"
                >
                    <!-- 缩略图-->
                    <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
                    <!-- 显示区域的大小-->
                    <bm-view style="width: 100%; height:600px; flex: 1"></bm-view>
                    <!-- 搜索区域-->
                    <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
                     <!--添加图标会跳动-->
                    <bm-marker @click="infoWindowOpen" :position="{lng: 116.404, lat: 39.915}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
                        <bm-label content="啦啦，例子" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
                    </bm-marker>
                    <!-- 添加自定义图标,如果多个点可以用v-for进行循环-->
                    <bm-marker @click="infoWindowOpen" v-for="(item,key) in customPoint" :key="key" :position="item.coordinates" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: item.icon, size: {width: 300, height: 157}}">
                        <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">{{item.info.msg}}</bm-info-window>
                    </bm-marker>
                    <!--地图坐标添加点 -->
                    <bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_CIRCLE" color="red" size="BMAP_POINT_SIZE_SMALL" @click="clickHandler"></bm-point-collection>
                </baidu-map>
            </el-main>
        </el-container>
    </div>
</template>
<script>
    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
    import BmView from 'vue-baidu-map/components/map/MapView.vue'
    import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'
    export default {
        name: "Index",
        components: {
            BaiduMap,
            BmView,
            BmLocalSearch
        },
        data() {
            return {
                location: {
                    lng: 118.122011,
                    lat: 36.854415
                },
                //自定义点的坐标对象
                customPoint:[{
                    icon:'http://img5.imgtn.bdimg.com/it/u=3257974346,1665912871&fm=26&gp=0.jpg',
                    //坐标
                    coordinates:{
                        lng: 118.122011,
                        lat: 36.854415
                    },
                    info:{
                        name:'wcx',
                        msg:'测试例子'
                    }



                },
                    {
                        icon: 'http://img5.imgtn.bdimg.com/it/u=3257974346,1665912871&fm=26&gp=0.jpg',
                        //坐标
                        coordinates: {
                            lng:  106.533625,
                            lat: 39.927109
                        },
                        info:{
                            name:'wcx',
                            msg:'测试例子'
                        }
                    }],
                show:false,
                points: [],
                zoom: 12.8,
                addressKeyword: "",
                mapStyle: {
                    styleJson: [
                        {
                            "featureType": "all",
                            "elementType": "geometry",
                            "stylers": {
                                "hue": "#007fff",
                                "saturation": 89
                            }
                        },
                        {
                            "featureType": "water",
                            "elementType": "all",
                            "stylers": {
                                "color": "#ffffff"
                            }
                        }
                    ]
                }
            };
        },
        methods: {
            getLocationPoint(e) {
                this.lng = e.point.lng;
                this.lat = e.point.lat;
                /* 创建地址解析器的实例 */
                // eslint-disable-next-line no-undef
                let geoCoder = new BMap.Geocoder();
                /* 获取位置对应的坐标 */
                geoCoder.getPoint(this.addressKeyword, point => {
                    this.selectedLng = point.lng;
                    this.selectedLat = point.lat;
                });
                /* 利用坐标获取地址的详细信息 */
                // eslint-disable-next-line no-undef
                geocoder.getLocation(e.point, res => {
                    console.log(res);
                })

            },
            infoWindowClose () {
                this.show = false
            },

            infoWindowOpen () {
                this.show = true
            },
            //向百度地图上加点
            addPoints () {
                const points = [];
                for (var i = 0; i < 1000; i++) {
                    const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
                    points.push(position)
                }
                this.points = points
            },
            clickHandler (e) {
                alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
            },
            //只显示中国区域

        },
        mounted() {
            this.addPoints();
        },

    }
</script>
<style>
    <!--去掉百度logo -->
    .BMap_cpyCtrl {
        display:none;
    }
    .anchorBL{
        display:none;
    }
</style>