Vue集成百度地图

Vue集成百度地图

1.准备工作

1.进入百度地图开放平台，注册成为百度开发者

2.创建应用，获取（AK）码

3.在index.html中引入百度地图

3.设置一个div显示地图

<div id="content">
    <div id="showMap"></div>
</div>

<script>
    export default {
        name: 'index',
        methods: {
            map () {
                try {
                     let map = new BMap.Map("showMap") // 创建Map实例
                      map.centerAndZoom(new BMap.Point(******, ******), 18) // 初始化地图,设置中心和地图级别
                      map.addControl(new BMap.MapTypeControl({ // 添加地图类型控件
                            mapTypes: [
                                BMAP_NORMAL_MAP,
                                BMAP_HYBRID_MAP
                            ]
                        }))
                        map.setCurrentCity('***') // 设置地图显示的城市 此项是必须设置的
                        map.enableScrollWheelZoom(true)// 开启鼠标滚轮缩放
                        map.addEventListener("click",function (e) {
                            console.log(e.point);//获取点击位置的坐标
                        })
                } catch (error) {
                    console.log(error.message)
                }


            }

        },

        mounted () {

            this.map();
        }
    }
</script>

2.信息窗口

<script type="text/javascript">
	// 百度地图API功能
	var map = new BMapGL.Map("showMap");
	var point = new BMapGL.Point(116.404, 39.925);
	map.centerAndZoom(point, 15);
	
	var marker = new BMapGL.Marker(point);  // 创建标注
	map.addOverlay(marker);              // 将标注添加到地图中
	var opts = {
	    width : 200,     // 信息窗口宽度
	    height: 100,     // 信息窗口高度
	    title : "故宫博物院" , // 信息窗口标题
	    message:"这里是故宫"
	}
	var infoWindow = new BMapGL.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
	marker.addEventListener("click", function(){          
		map.openInfoWindow(infoWindow, point); //开启信息窗口
	}); 
</script>

3.更多功能看百度地图开发者文档