1、在index.html页面中添加 !DOCTYPE html html head meta charset="utf-8" link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" / link rel="stylesheet" href="http://api.map.baidu.com
1、在index.html页面中添加
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body style="margin: 0">
<div id="app"></div>
<!-- 引入百度地图 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxxx"></script>
<!--加载鼠标绘制工具-->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<!--加载检索信息窗口-->
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
</body>
</html>
提醒：
<!-- 引入百度地图 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxxx"></script>
中的 ak=xxxxxxxxxxxxxxxxxxxxxxx
2、怎样获取百度密匙，看另一篇文章吧
3、新建一个baiduMap.vue
<template>
<div >
<div id="allmap">
<div id="map"</div>
</div>
</div>
</template>
<script>
export default {
name: "baiduMap",
data(){
return {
map: '', //地图
}
},
mounted() {
this.map = new BMap.Map("allmap"); // 创建Map实例
let _this = this;
this.map.centerAndZoom("湖南"); // 初始化地图,用城市名设置地图中心点
setTimeout(function(){
function myFun(result){
var cityName = result.name;
_this.map.setCenter(cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
}, 1000);
setTimeout(function(){_this.map.setZoom(12);}, 1000); //1秒后放大到12级
this.map.enableScrollWheelZoom(true);
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});// 左上角，添加比例尺
this.map.addControl(top_left_control);
/!** 添加2D和卫星地图切换 *!/
var mapType1 = new BMap.MapTypeControl(
{
mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
}
);
this.map.addControl(mapType1); //2D图，混合图
/!** 添加定位 *!/
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
this.map.addControl(navigationControl);
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e){
// 定位成功事件
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
});
geolocationControl.addEventListener("locationError",function(e){
// 定位失败事件
alert(e.message);
});
this.map.addControl(geolocationControl);
},
methods: {}
}
</script>
<style>
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
下一讲，添加地图地图检索功能