百度地图SDK调用步骤

百度地图SDK调用步骤

1、public/index.html

<script type="text/javascript"
        src="//api.map.baidu.com/api?type=webgl&v=3.0&ak=5M4fzbousX6aVF36QXVG85UyjiSpyazH"></script>

2、

<div id="container" style="width: 500px;height: 500px;overflow: auto"></div>

3、

const a = () => {
  const map = new window.BMapGL.Map('container');
  map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 14);
  const riding = new window.BMapGL.RidingRoute(map, {
    renderOptions: {
      map,
      autoViewport: true,
    },
  });
  // const start = new window.BMapGL.Point(116.310791, 40.003419);
  // const end = new window.BMapGL.Point(116.386419, 40.003519);
  riding.search('老华兴(劳动小区店)', '圆通讲寺-公交车站');
  // riding.search(start, end);
};

4、javascript

onMounted(() => {
  a();
});

5、去掉地图底下的文字

<style lang="scss" scoped>
/deep/ .anchorBL{
  display: none;
}
</style>