uniApp引入百度地图，地图画圈，地图滑动自动获取中心点，地图的动态标点和标点附近显示字，通过wbview实现在vue中调用地图

虽然是app端但是得申请浏览器的ak可以在app中正常显示和操作

先在static下创建一个存放map.html的目录

在vue中引入webview标签

<web-view @message="onMessage"  src="/static/html/map.html"></web-view>

可以在onMessage中处理html穿过来的东西

html中引入的东西

    <!-- uni 的 SDK -->
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <!-- 百度地图 -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=百度申请的ak"></script>

html代码

<div id='container'></div>//存放地图的容器

           * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            #container {
                height: 100vh
            }

html中定义的方法

    var map = new BMapGL.Map("container"); // 创建地图实例
        // llj
        // 初始化
        var lot = null
        var lat = null
        var range=0
        function initialization(item) {
            let e = JSON.parse(item)
            lot = e.lot
            lat = e.lat
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            var point = new BMapGL.Point(lot, lat);
            map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
            let marker = new BMapGL.Marker(point); // 创建标注
            map.addOverlay(marker);
        }
        // 滑动时自动获取中心位置的经纬度通过 uni.postMessage传回去
        map.addEventListener("dragend", function() {
          map.clearOverlays()
          var center = map.getCenter();  // 获取地图中心点位置
          lot = center.lng;  // 获取中心点经度
          lat = center.lat;  // 获取中心点纬度
          var point = new BMapGL.Point(lot, lat);
          let marker = new BMapGL.Marker(point); // 创建标注
          map.addOverlay(marker);
          mapcircle(range)
          uni.postMessage({
              data: {
                  lot: lot,
                lat:lat
              },
          });
        });
        // 添加模版开始操作一下东西时使地图不能手动移动只有结束后才能移动
        function moban(e){
            let a=document.getElementById('moban')
            a.style.display='block'
        }
        function stopmoban(){
            let a=document.getElementById('moban')
            a.style.display='none'
        }
        // 添加圆圈范围
        function mapcircle(data) {
            range=data
            if (!data) {
                map.clearOverlays()
                var point = new BMapGL.Point(lot, lat);
                var point = new BMapGL.Point(lot, lat);
                let marker = new BMapGL.Marker(point); // 创建标注
                map.addOverlay(marker);
            }
            map.clearOverlays()
            var point = new BMapGL.Point(lot, lat);
            var circle = new BMapGL.Circle(point, data);
            circle.setFillColor("#B9D1F6"); //填充颜色
            circle.setStrokeColor("#B9D1F6"); //边线颜色
            var point = new BMapGL.Point(lot, lat);
            let marker = new BMapGL.Marker(point); // 创建标注
            map.addOverlay(marker);
            map.addOverlay(circle);
        }
        // 动态创建标注和添加标注边里的文字
        function getInfo(item) {
            let e = JSON.parse(item)
            let point = new BMapGL.Point(e.location.lng, e.location.lat);
            map.centerAndZoom(new BMapGL.Point(e.location.lng, e.location.lat), 12);
            let marker = new BMapGL.Marker(point); // 创建标注
            var label = new BMapGL.Label(e.name, {
                off: new BMapGL.Size(20, -10)
            });
            label.setStyle({
                border: "1px solid #f6f6f6",
                borderRadius: "10px",
                padding: "5px 10px",
                color: "#ffffff",
                fontSize: "12px",
                background: '#000'
            });
            marker.setLabel(label);
            map.addOverlay(marker);
        }

在vue中通过这个调用html中调用的方法

                // #ifdef APP-PLUS
                let webViews = this.$scope.$getAppWebview();
                setTimeout(function() {
                    let currentWebview = webViews.children()[0];
                    currentWebview.evalJS("html中定义的方法名字('" + JSON.stringify(data) + "')");

//数组之类的得先转JSON字符串在html接受是转回来
                }, 100);
                // #endif