vue使用百度地图记录

vue3使用百度地图

首先 index.html 引入百度地图 

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

ak 要自己申请。申请地址 登录百度帐号

页面中使用

页面

<div id="mapShow" class="map">
</div>

div要设置宽高 

JS部分

在script 下创建变量

let BMap = {};
let map = {};

在 mounted 中引入

BMap = window.BMap;
map = new BMap.Map("mapShow");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
//添加缩放平移控件
map.addControl(new BMap.NavigationControl());
//添加比例尺控件
map.addControl(new BMap.ScaleControl());
//添加地图类型控件
map.addControl(new BMap.MapTypeControl());

添加标注

//设置标注的图标 

// anchor  标注点在图片的位置

var icon = new BMap.Icon(require("@/assets/image/icon/error.png"), new BMap.Size(20, 20), {
    anchor: new BMap.Size(10, 10)
});

//设置标注的经纬度
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915), {
    icon: icon
});

//把标注添加到地图上
map.addOverlay(marker);
//标注的内容
var content = "标注的内容";

//点击显示标注

var infowindow = new BMap.InfoWindow(content);
marker.addEventListener("click", function() {
    this.openInfoWindow(infowindow);
});

css部分

.map {
    width: 100%;
    height: calc(100vh - 210px); //宽高一定要设置
    margin-top: 10px;
}