uniapp中通过webview实现百度地图Javascript Api 定位、路线规划、标记、导航

1.在百度地图开放平台 控制台新建应用，应用类型为 浏览器端，生成AK

2.实现 标记当前位置,点击获取附近数据并标记 Marker ,地点检索，数据传输到uniapp。配有详细注释，效果如下图：

代码如下：

  
    
  


  export default {
    data() {
      return {
      }
    },
    methods: {
      getData(event) {
        let data = event.detail.data;
        uni.setStorageSync('mapData',data)
        uni.navigateBack()
      }
    }
  }

在static文件下创建baidu-map.html文件

baidu-map.html代码如下（把ak换为你申请的ak就可以直接用）

    
    
    
        body,html {width: 100%;height: 100%; margin: 0;font-family: "微软雅黑";}
        #allmap {height: 500px; width: 100%;overflow: hidden;}
        #result {height: calc(100% - 610px);width: 100%;font-size: 12px;}
        #resultText { height: 70px;font-size: 18px;padding: 6px;}
        #r-result {height: 40px;width: 100%;display: flex;align-items: center;justify-content: center;
            border-bottom: #A9A9A9 1px solid;margin-bottom: 2px;margin-top: 3px;}
        .btn {width: 100px;height: 34px;border: 1px solid #999;border-radius: 5px;margin: 0 auto;
            font-size: 18px;text-align: center;line-height: 34px;color: #333;background: #E8E7E3;}
    
    
    
        
    
    
    选择地址


    
    
        
        
    
    
    
    
    
        
        确定地点
    
    
      document.write('');
        var map = new BMap.Map('allmap');
        var poi = new BMap.Point(116.307852, 40.057031); //罗马的坐标
        var addressPost; //存储附近信息数据
        var CURRENT_LNG; //记录坐标
        var CURRENT_LAT; //记录坐标
        var lng, lat; //记录坐标
        map.centerAndZoom(poi, 18); //设置地图中心点 和 缩放等级
        map.enableScrollWheelZoom();//开启鼠标滚轮
        function G(id) {
            return document.getElementById(id);
        }
        //获取当前位置附近地址信息 --- geoc.getLocation
        var geoc = new BMap.Geocoder();
        var getCurrentLocation = function (lg, lt) {
            //geoc.getLocation 获取到 坐标 以及 包含附近地址信息的数组
            geoc.getLocation(new BMap.Point(lg, lt), function (rs) {
                //取数组第一个地址信息为选中的位置，也可现为地址列表
                var nearbyAddeessArr = rs.surroundingPois[0];
                document.getElementById('resultText').innerText = '当前位置 ：' + nearbyAddeessArr.title + '——' + nearbyAddeessArr.address;
                addressPost = nearbyAddeessArr.title + '——' + nearbyAddeessArr.address;
                CURRENT_LNG = lg;
                CURRENT_LAT = lt;
            });
        }
        //通过浏览器获取当前定位的坐标
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                lng = r.point.lng
                lat = r.point.lat
                getCurrentLocation(lng, lat)
            }
            else {
                alert('failed' + this.getStatus());
            }
        }, { enableHighAccuracy: true })
         //给地图添加点击事件 标记 marker
        map.addEventListener("touchstart", function (e) {
            map.clearOverlays();//清除地图上所有覆盖物 marker
            //获取坐标
            var lng = e.point.lng;
            var lat = e.point.lat;
            //创建marker标注位置
            var pt = new BMap.Point(lng, lat);
            //new BMap.Icon("本地marker图标路径",图标的尺寸,{marker偏移量,窗口的偏移量})
            var myIcon = new BMap.Icon("https://mapopen-website-wiki.cdn.bcebos.com/markers.png", new BMap.Size(19, 25), {
                    anchor: new BMap.Size(10, 25),
                    imageOffset: new BMap.Size(0, 0 - 12 * 25)
                });
            var marker2 = new BMap.Marker(pt, { icon: myIcon });  // 创建标注实例
            map.addOverlay(marker2); //将标注添加到地图中
            getCurrentLocation(lng, lat)
        });
        // 以下是地点检索功能
        //创建一个search实例
        var ac = new BMap.Autocomplete(
            {
                "input": "suggestId",
                "location": map
            });
        var myValue;//存储地址检索结果
        ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
            G("searchResultPanel").innerHTML = "onconfirm
index = " + e.item.index + "
myValue = " + myValue;
            setPlace();
        });
        // 地图移动到检索的位置，并且标记
        function setPlace() {
            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun() {
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(pp, 18);
                map.addOverlay(new BMap.Marker(pp));    //添加标注
                getCurrentLocation(pp.lng, pp.lat)
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }
        //确定地址 将数据传输到 uniapp 的 webview内
        document.addEventListener('UniAppJSBridgeReady', function () {
            //uniapp 挂载完毕，在内部可以使用uniapp 部分 api,具体看 官方文档 webview
            document.querySelector('.btn').addEventListener('touchstart', function () {
                uni.postMessage({
                    data: {
                        addressPost,
                        CURRENT_LNG,
                        CURRENT_LAT
                    }
                });
            })
        });