一、H5页面地图

1.H5地图加载

• 创建容器

<div id="lock_map"></div>

• 地图家长

var map = new BMap.Map("lock_map");
    var point = new BMap.Point(120.199672, 30.331184);
    map.centerAndZoom(point, 16);
    map.enableScrollWheelZoom(true);

    // 添加定位控件;
    var geolocationControl = new BMap.GeolocationControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT
    });

    geolocationControl.addEventListener("locationSuccess", function (e) {
        getGEO();
    });
    map.addControl(geolocationControl);

    //getGEO();

    //定位;
    function getGEO() {
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                map.clearOverlays();
                //返回当前中心点;
                map.panTo(r.point);
                map.centerAndZoom(r.point, 17);

                //获取半径;
                var radiusLength = 3;
                var keyword = '美食';
                console.log(keyword)

                var x = r.point.lng;
                var y = r.point.lat;
                var newPoint = new BMap.Point(x, y);
                addMaker(newPoint);//标注中心;
                addCircle(newPoint, radiusLength);//范围;
                searchMaker(newPoint, keyword, x, y);//周边标注;

            } else {
                console.log('failed' + this.getStatus());
            }
        }, function (error) {
            console.log(error);
        }, {
            enableHighAccuracy: true,
            timeout: 1000,
            maximumAge: 0
        });
    }

2.标注事件

   function addMaker(point) {
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);

        //监听标注事件;
        marker.addEventListener("click", function () {
            console.log('标注被点击了');
            location.href = 'sub.html';
        });
    }

二、H5返回微信小程序

1.H5页面核心代码

• 在H5页面引入//res.wx.qq.com/open/js/jweixin-1.6.0.js，建议使用高版本；

 <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>子页面</title>
    <script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

• 点击返回按钮

<a href="javascript:;" onclick="getNavi(120.199672,30.331184,'米果国际·共赋未来谷','浙江省杭州市拱墅区石桥路293号');">导航到这里</a>

• 调用微信小程序和H5通用API

判断是否在微信小程序环境中

    var wxApp = false;
    wx.miniProgram.getEnv(function (res) {
        if (res.miniprogram) {
            wxApp = true;
        } else {
            wxApp = false;
        }
    });

地图调起，再次返回小程序页

 //地图调起，再次返回小程序页
    function getNavi(lng, lat, name, address) {
        if (wxApp) { //小程序环境
            wx.miniProgram.navigateTo({
                url: '/pages/navi/navi?lng=' + lng + '&lat=' + lat + '&name=' + name + '&address=' + address,//跳转回小程序页面,传参
                success: function () {
                    console.log('成功跳回小程序')
                },
                fail: function () {
                    console.log('跳转回小程序页面失败');
                },
            });
        } else {
            window.location.href = 'https://test.com'
        }
    }

2.微信小程序接收传参核心代码

• 获取H5传递参数的方式为： console.log(options)
• latitude和longitude必须为数字类型，不支持字符串类型，需要parseFloat进行转换；
• 调用wx.openLocation接口API进行地图导航调起；

 /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        //console.log(options)
        if (options != undefined) {
            //判断跳转页面;
            if (options.lat != "" && options.lat != undefined) {
                //获取H5传递参数
                let latitude = parseFloat(options.lat)
                let longitude = parseFloat(options.lng)
                let name = options.name
                let address = options.address
                //执行导航页
                wx.openLocation({
                    latitude,
                    longitude,
                    name,
                    address,
                    scale: 18
                })
            }
        } else {
            console.log('lockdatav')
        }
    },

三、开发中遇见的坑

1.wx.openLocation调起地图后需要点击两次返回才到web-view页面

解决方案1：官方问答，未能妥善解决。

解决方案2 在导航跳转页，重新加载了一次web-view页。给用户使用的感觉上是返回了一次。

<web-view src="https://test.com"></web-view>

2.H5无法调用百度定位new BMap.Geolocation对象

是在PC端IDE预览时，经常出现的问题。一般是因为PC端无法正常定位导致的，在真机预览即可。

3.安卓某些机型无法从H5跳转到小程序

安卓系统打开webview被微信拦截问题：在微信小程序里开发webview h5的时候，配置合法域名，域名备案的情况下，出现了 ios 上正常打开，但是在 Android 手机上出现了被拦截的情况，一般都是因为传参的url中存在中文导致的。

解决方案： encodeURI对汉字进行编码处理。

@漏刻有时