收藏
回答

小程序调用H5页面引入腾讯地图出现maphandle弹出框?

小程序调用H5页面引入腾讯地图出现maphandle弹出框

在浏览器里没问题,不会弹出。在小程序viewurl里就弹出

最后一次编辑于  2023-03-19
回答关注问题邀请回答
收藏

2 个回答

  • 御
    07-17

    你好,我也是遇到这个问题请问解决了吗

    07-17
    有用
    回复
  • A日尧          🎈
    A日尧 🎈
    2023-03-20
    <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=<?php echo $api[4];?>"></script>
    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
    var appkey ="<?php echo $api[4];?>";
    var geolocation = new qq.maps.Geolocation(appkey, "myapp");
    var options = {timeout: 8000};
    
    
    $(function(){
        geolocation.getLocation(showPosition, showErr, options);
    })
    
    
    function showPosition(position) {
        console.log(position);
        //定义地图中心点坐标
        var center = new TMap.LatLng(position.lat, position.lng);
        //定义map变量,调用 TMap.Map() 构造函数创建地图
        var map = new TMap.Map(document.getElementById('container'), {
            center: center,//设置地图中心点坐标
            zoom: 17,   //设置地图缩放级别
            pitch: 43.5//设置俯仰角
            rotation: 45    //设置地图旋转角度
        });
        var markerLayer = new TMap.MultiMarker({
            map: map,  //指定地图容器
            //样式定义
            styles: {
                //创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
                "myStyle": new TMap.MarkerStyle({ 
                    "width": 35// 点标记样式宽度(像素)
                    "height": 35, // 点标记样式高度(像素)
                    "src": 'map.png'//图片路径
                    //焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
                    "anchor": { x: 16, y: 32 }  
                }) 
            },
            geometries: [{
                "id": "1",   //点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
                "styleId": 'myStyle'//指定样式id
                "position": new TMap.LatLng(position.lat, position.lng),  //点标记坐标位置
                "properties": {//自定义属性
                    "title": "marker1"
                }
            }]
        });
        
        //解析地址
        mapinfo(position.lat,position.lng);
        //jiexiaddress(position.lat,position.lng);
    };
    
    
    function showErr() { 
        alert("定位失败!");
    };
    
    
    function okmap(font,lat,lng)
    {
        var index = parent.layer.getFrameIndex(window.name); 
        parent.setRel(font,lat,lng);
        parent.layer.close(index);
    }
    
    
    function mapinfo(lat,lng){
        var  url3 = encodeURI("https://apis.map.qq.com/ws/place/v1/explore?boundary=nearby("+lat+","+lng+",1000)&policy=1&page_size=20&page_index=1&key="+appkey+"&output=jsonp");
        $.ajax({
            type: "GET",
            url: url3,
            async: false,
            data: '',
            dataType: "jsonp",
            success: function (result) {
    
    
                //console.log(result.data);
                var data = result.data;
                var rep = '黑龙江省哈尔滨市';
                $.each(data, function(key, item) 
                {
                   console.log(item.address);
                   $("#addresslist").append("<li><a href='javascript:okmap(\""+(item.address.replace(rep,""))+"\",\""+lat+"\",\""+lng+"\");'><i class='icon YIQI-UI-iconfont'>&#xe671;</i> "+(item.address.replace(rep,""))+"</a></li>");
                });
                
            },
            error: function (xhr, errorType, error) {
    
    
                alert(error);
    
    
            },
            complete: function () {
    
    
            }
    
    
        });
        
    }
    
    2023-03-20
    有用
    回复
登录 后发表内容