vue中使用百度地图

大概浏览

百度地图版本： JavaScript API GL v1.0
index.html中引入： https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥
- ts中使用：写一个d.ts: declare const BMapGL: any
容器： <div id="container"></div>
初始化： var map = new BMapGL.Map("container");
Point： var point = new BMapGL.Point(116.404, 39.915);
设置地图： map.centerAndZoom(point, 15);
设置地图： map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
设置地图：

// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap",{
    enableRotate: false,
    enableTilt: false
});

设置地图： map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
地图控件：比例尺ScaleControl, 缩放ZoomControl, 定位LocationControl, 城市选择列表CityListControl, 版权CopyrightControl。
地图控件：控件可设置offset和anchor值

var opts = {
    offset: new BMapGL.Size(150, 5)
    anchor: BMapGL.ControlAnchor.BOTTOM_LEFT // TOP_LEFT,TOP_RIGHT,BOTTOM_LEFT,BOTTOM_RIGHT
}
// 添加控件
map.addControl(new BMapGL.ScaleControl(opts));
// 移除控件
map.removeControl(new BMapGL.ScaleControl(opts));

设置地图样式：

map.setMapStyleV2({
  styleId: '3d71dc5a4ce6222d3396801dee06622d'
});

地图覆盖物-marker：

const markerIcon = require("markers.png")
var myIcon = new BMapGL.Icon(markerIcon, new BMapGL.Size(23, 25), {
    // 指定定位位置。
    // 当标注显示在地图上时，其所指向的地理位置距离图标左上
    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
    // 图标中央下端的尖角位置。
    anchor: new BMapGL.Size(10, 25),
    // 设置图片偏移.
    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
    // 需要指定大图的偏移位置，此做法与css sprites技术类似。
    imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移 
});

var point = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point, {icon: myIcon}); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中

marker.addEventListener("click", function(e){
    var target = e.target;
    var infowindow = new BMapGL.InfoWindow('<div>xxx</div>');
    target.openInfoWindow(infowindow)
});

地图添加叠加层： new BMapGL.GroundOverlay

百度地图 vue

vue中使用百度地图

大概浏览