卢融霜_
卢融霜_
  • 发布:2021-05-10 16:15
  • 更新:2021-05-18 16:22
  • 阅读:1252

map(百度地图)里,使用cover-image Android 不显示

分类:uni-app
<view class="page-section page-section-gap page">  
                    <map  
                        id="map1"  
                        ref="map1"  
                        style="width: 750upx; height: 80vh;"  
                        :enable-satellite="true"  
                        :show-compass="true"  
                        :scale="scale"  
                        :latitude="latitude"  
                        :longitude="longitude"  
                    >  
                        <cover-image @click="clickReset" class="coverImg" src="/static/ic_my_loc.png"></cover-image>  
                    </map>

Ios,H5可以正常显示,android显示不出来, 图片在static下

完整代码

<template>  
    <view>  
        <u-navbar title="工地考勤" :is-back="false"></u-navbar>  
        <view>  
            <view class="page-body">  
                <view class="page-section page-section-gap page">  
                    <map  
                        id="map1"  
                        ref="map1"  
                        style="width: 750upx; height: 80vh;"  
                        :enable-satellite="true"  
                        :show-compass="true"  
                        :scale="scale"  
                        :latitude="latitude"  
                        :longitude="longitude"  
                    >  
                        <cover-image @click="clickReset" class="coverImg" src="/static/ic_my_loc.png"></cover-image>  
                    </map>  
                </view>  
            </view>  
        </view>  
        <view>{{ locText }}</view>  
    </view>  
</template>  
<script>  
import bundleIdentifier from '@/common/bundleIdentifier.js';  
export default {  
    data() {  
        return {  
            id: 0,  
            latitude: 39.909,  
            longitude: 116.39742,  
            scale: 17,  
            winHeight: 0,  
            locText: ''  
        };  
    },  
    onLoad() {  
        var that = this;  
        uni.getSystemInfo({  
            success: function(res) {  
                that.winHeight = res.windowHeight - that.CustomBar;  
            }  
        });  
        setTimeout(function() {  
            that.initMap();  
        }, 500);  
        var view = new plus.nativeObj.View('ivLoc', {  
            bottom: '25%',  
            left: '2%',  
            height: '25px',  
            width: '25px'  
        });  
        view.draw([{ tag: 'img', id: 'img', src: '/static/ic_my_loc.png', position: { bottom: '0px', left: '0px', width: '100%', height: '100%' } }]);  
        view.addEventListener(  
            'click',  
            function() {  
                that.clickReset();  
            },  
            false  
        );  
        view.show();  
    },  
    methods: {  
        IsPtInPoly(o, l) {  
            var t = l.getPath();  
            var h = t.length;  
            var n = true;  
            var j = 0;  
            var g = 2e-10;  
            var s, q;  
            var e = o;  
            s = t[0];  
            for (var f = 1; f <= h; ++f) {  
                if (e.equals(s)) {  
                    return n;  
                }  
                q = t[f % h];  
                if (e.latitude < Math.min(s.latitude, q.latitude) || e.latitude > Math.max(s.latitude, q.latitude)) {  
                    s = q;  
                    continue;  
                }  
                if (e.latitude > Math.min(s.latitude, q.latitude) && e.latitude < Math.max(s.latitude, q.latitude)) {  
                    if (e.longitude <= Math.max(s.longitude, q.longitude)) {  
                        if (s.latitude == q.latitude && e.longitude >= Math.min(s.longitude, q.longitude)) {  
                            return n;  
                        }  
                        if (s.longitude == q.longitude) {  
                            if (s.longitude == e.longitude) {  
                                return n;  
                            } else {  
                                ++j;  
                            }  
                        } else {  
                            var r = ((e.latitude - s.latitude) * (q.longitude - s.longitude)) / (q.latitude - s.latitude) + s.longitude;  
                            if (Math.abs(e.longitude - r) < g) {  
                                return n;  
                            }  
                            if (e.longitude < r) {  
                                ++j;  
                            }  
                        }  
                    }  
                } else {  
                    if (e.latitude == q.latitude && e.longitude <= q.longitude) {  
                        var m = t[(f + 1) % h];  
                        if (e.latitude >= Math.min(s.latitude, m.latitude) && e.latitude <= Math.max(s.latitude, m.latitude)) {  
                            ++j;  
                        } else {  
                            j += 2;  
                        }  
                    }  
                }  
                s = q;  
            }  
            if (j % 2 == 0) {  
                return false;  
            } else {  
                return true;  
            }  
        },  
        initMap(callBack) {  
            var that = this;  
            var mapContent = uni.createMapContext('map1', this);  
            if (mapContent && mapContent.$getAppMap()) {  
                //绘制打开范围  
                mapContent.$getAppMap().clearOverlays();  
                // var points = new Array(  
                //  this.bd2gcjString(116.1820943298403, 39.750488978269416),  
                //  this.bd2gcjString(116.19165426654206, 39.750488978269416),  
                //  this.bd2gcjString(116.19165426654206, 39.74736124994377),  
                //  this.bd2gcjString(116.1820943298403, 39.74736124994377)  
                // );  
                var points = new Array(  
                    new plus.maps.Point(116.1820943298403, 39.750488978269416),  
                    new plus.maps.Point(116.19165426654206, 39.750488978269416),  
                    new plus.maps.Point(116.19165426654206, 39.74736124994377),  
                    new plus.maps.Point(116.1820943298403, 39.74736124994377)  
                );  
                var polygonObj = new plus.maps.Polygon(points);  
                polygonObj.setStrokeColor('#0199FE');  
                polygonObj.setFillColor('#66faff');  
                polygonObj.setFillOpacity(0.5);  
                polygonObj.setLineWidth(3);  
                mapContent.$getAppMap().addOverlay(polygonObj);  
                //获取个人位置  
                mapContent.$getAppMap().getUserLocation(function(state, point) {  
                    if (0 == state) {  
                        that.latitude = point.latitude;  
                        that.longitude = point.longitude;  
                        var markObj = new plus.maps.Marker(point);  
                        markObj.setIcon('static/ic_baidu_local.png');  
                        markObj.setLabel('当前所在位置');  
                        var bubble = new plus.maps.Bubble('当前所在位置');  
                        markObj.setBubble(bubble);  
                        mapContent.$getAppMap().addOverlay(markObj);  
                        //判断是否在打卡范围内  
                        if (that.IsPtInPoly(point, polygonObj)) {  
                            that.locText = '在范围内';  
                        } else {  
                            that.locText = '在范围外';  
                        }  
                    }  
                    if (callBack) {  
                        callBack(mapContent);  
                    }  
                });  
            }  
        },  
        bd2gcjString(latitude, longitude) {  
            var x_pi = (3.14159265358979324 * 3000.0) / 180.0;  
            var x = latitude - 0.0065,  
                y = longitude - 0.006;  
            var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);  
            var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);  
            return new plus.maps.Point(z * Math.cos(theta), z * Math.sin(theta));  
        },  
        clickReset() {  
            var that = this;  
            that.initMap(function(mapContent) {  
                if (mapContent) {  
                    that.scale = 17;  
                    mapContent.$getAppMap().setZoom(17);  
                }  
            });  
        }  
    }  
};  
</script>  

<style>  
.map {  
    width: 100%;  
    height: 400px;  
}  
.page {  
    display: flex;  
    justify-content: center;  
}  
.controls-title {  
    width: 100%;  
    color: #000000;  
    position: absolute;  
    left: 100upx;  
    top: 100upx;  
    height: 100upx;  
}  
.coverImg {  
    width: 60upx;  
    height: 60upx;  
    bottom: 150upx;  
    left: 20upx;  
    background-color: #ffffff;  
    border-radius: 15upx;  
    position: absolute;  
}  
</style>  
2021-05-10 16:15 负责人:无 分享
已邀请:
a***@163.com

a***@163.com

其实是map地图加载有个时间,如果这个cover-image先加载完还是会被map地图组件覆盖的,我之前的就是有时候有图片,有时候没有,后面我把cover-image显现的时间延迟了300毫秒,就没有问题了,效果上就是感觉地图加载差不多了然后组件就出来了

  • 卢融霜_ (作者)

    把显示时间延迟,是怎么操作呢?使用 v-show吗?我使用v-show还是没有显示出来。



    <map

    id="map1"

    ref="map1"

    style="width: 750upx; height: 80vh;"

    enable-satellite="true"

    show-compass="true"

    scale="scale"

    latitude="latitude"

    longitude="longitude"
    >

    <cover-image v-show="showView" @click="clickReset" class="coverImg" src="/static/ic_my_loc.png"></cover-image>

    </map>


    setTimeout(function() {

    that.showView = true;

    }, 3000);

    2021-05-11 16:32

a***@163.com

a***@163.com

我用的是v-if,然后延迟的方法写在Onload方法里面就行

卢融霜_

卢融霜_ (作者)

现在使用的解决办法是:

var view = new plus.nativeObj.View('ivLoc', {  
            bottom: '25%',  
            left: '2%',  
            height: '25px',  
            width: '25px'  
        });  
        view.draw([{ tag: 'img', id: 'img', src: '/static/ic_my_loc.png', position: { bottom: '0px', left: '0px', width: '100%', height: '100%' } }]);  
        view.addEventListener(  
            'click',  
            function() {  
                that.clickReset();  
            },  
            false  
        );  
        view.show();

该问题目前已经被锁定, 无法添加新回复