移动端h5使用百度地图的一些问题

1、加载地图

<div id="container" style="height: 100vh;" />

loadBMap() {
    return new Promise(function(resolve, reject) {
      if (typeof window.BMap !== 'undefined') {
        resolve(window.BMap)
        return true
      }
      window.onBMapCallback = function() {
        resolve(window.BMap)
      }
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'https://api.map.baidu.com/api?v=2.0&ak=你的ak&s=1&callback=onBMapCallback'
      script.onerror = reject
      document.head.appendChild(script)
    })
  }
 initMap() {
 	/*	因为我这里加载的是离线地图，可以直接全局使用new Bmap, 所以下面的就注释了, 
 		正常情况照下面写就行, 不然会提示你`BMap undefined`
     */ 
     // const BMap = await loadBMap()
     this.map = new BMap.Map('container')
     let markerPoint = new BMap.Point(116.404, 39.996)
     this.map.centerAndZoom(markerPoint, 15)
     this.map.enableScrollWheelZoom(true)
	this.drawMap()
 },

2、获取当前定位
这里使用SDK辅助定位 ，有三种定位方式，参考 提供的定位服务

drawMap() {
	let geolocation = new BMap.Geolocation()
	geolocation.enableSDKLocation() 
	geolocation.getCurrentPosition((r) => {
	    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
	    		// r.point 就是你的当前定位，这里可以写根据定位做一些异步逻辑
	    		ajax.get(....)
	    		this.setPointLint(data) // 传入一些你需要的数据
	    		
	    }
	}
},

3 地图标注、画线、路线规划等等

setPointLint(data) {
      // 当前网点
     let dept_pos = new BMap.Point(112.23432432, 34.32423432) // 这里经纬度我乱写的，写你要设置的经纬度即可
     let dept_Icon = new BMap.Icon('/static/location.png', new BMap.Size(24, 24)) 
     // 这里icon的图片其实要和index.html在同一层级下，我的目录是/public/static/location.png
     let dept_marker = new BMap.Marker(dept_pos, { icon: dept_Icon })

     dept_marker.disableMassClear() // 禁止标注被删除
     this.map.addOverlay(dept_marker) // 添加自定义标注
     let driving = new BMap.DrivingRoute(this.map, { // 这里的this.map，可以是map,也可以是某个具体的地址位置名称或经纬度，参考 https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference.html#a7b16 ， 具体的地址可能加载资源要少一些，运行速度快，这只是猜测
         renderOptions: {
             map: this.map,
             autoViewport: true, // 自动调整地图视野
             enableDragging: false // 禁止路线拖拽
         },
         onMarkersSet: (routes) => { // 移除默认的始终图标
             for (let i = 0; i < routes.length; i++) {
                 if (i === 0 || i === routes.length - 1) {
                     this.map.removeOverlay(routes[i].marker)
                 }
             }
         },
         onPolylinesSet: (routes) => { // 自定义路线样式
             for (var i = 0; i < routes.length; i++) {
                 routes[i].getPolyline().setStrokeWeight(4)
                 routes[i].getPolyline().setStrokeOpacity(0.8)
                 routes[i].getPolyline().setStrokeColor('#5298ff')
             }
         }
     })
   driving.search(dept_pos, end, { // 规划路线
       waypoints: sortList // 路线途经点集合， 参考 https://lbsyun.baidu.com/jsdemo.htm#drivingroute1
   })
}

多看文档
百度地图api参考文档