美文网首页
uni高德地图nvue总结

uni高德地图nvue总结

作者: 全栈的猫南北 | 来源:发表于2022-08-30 10:00 被阅读0次

    1.uniapp的地图<map></map>中只能放图片<cover-imag>不能放view,但是可以使用定位position: fixed;来解决

            <scroll-view class="scroll_content" scroll-y="true" :style="{'top': pageTop+'px', 'height': screenHeiht+'px'}">
                <map id="map" ref="map" class="map_wrapper" :style="{'height': screenHeiht + 'px'}" :scale="scale"
                    :show-scale="true" :latitude="latitude" :longitude="longitude" :markers="_markers"
                    @markertap="markertap" @regionchange="handleRangenChange" @updated="_updated" :circles="_circles"
                    :polyline="_polylines">
    
                    <!-- <cover-image :style="{'top': topScreenHeiht + 'px'}" class="controls-center"
                    src="/static/images/locationSeartchPoint2.png"></cover-image> -->
    
                    <cover-image :style="{'top':lookfindmetop  + 'px'}" class="controls-findme" @click="findme"
                        src="/static/images/findMe.png"></cover-image>
                </map>
            </scroll-view>
    

    3.uniapp的地图marker的lable在安卓不能实时变动,但是calllout可以.callout设置 display: 'ALWAYS', 即可实现和lable的效果
    4.Uni的坐标点画十字辅助线用polyline,路线指定上下左右4个坐标形成2个线段
    5.Uni的坐标画圆辅助线就用circles
    6.Uni的地图大头针经纬度在标注图标的锚点,默认底边中点:anchor。
    7.Uni的地图聚合族joinCluster: true, // 产生聚合簇,需添加该属性
    8.Uni的地图的markers想要显示在最顶层,需要最后添加到markers组中
    9.第一次进入地图页面,地图没加载出来问题。:map地图不要加postion定位可以在其外层嵌套一层view或者scroview,哪里出问题去看哪里
    10,自适应一屏显示所有参考点、摄像机、我的位置所有大头针图标。再把地图中心点移动到某个位置

        that.mapContext.includePoints({
                            padding: [70, 200, 70, 70],
                            points: points
                        });
            setTimeout(function() {
                                that.mapContext.getScale({
                                    complete: (res) => {
                                        console.log('地图缩放比例', res.scale);
                                        that.getCurrentLoaction(res.scale);
                                    }
                                });
                            }, 500);
    

    相关文章

      网友评论

          本文标题:uni高德地图nvue总结

          本文链接:https://www.haomeiwen.com/subject/xpdlnrtx.html