plus.maps.Map 错误

分类：MUI

用小米调试报如下错误：
Uncaught TypeError: Cannot read property 'offsetLeft' of null

代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>

</head>
<body>
<div class="mui-content">
<div class="container"></div>
</div>
</body>
</html>
<script type="text/javascript" charset="utf-8">
mui.init();
var map=null;
var em=null;
mui.plusReady(function(){
map=new plus.maps.Map("container");
map.centerAndZoom(new plus.maps.Point(116,30),5);

    });  
</script>

2014-10-27 17:25 负责人:无分享

3 个回复

修竹

我也遇到这个问题了，该怎么解决呢？为啥没人回答的？

vision25

<div id="idMapMy">地图加载中...</div>

var em=null, mapMy = null;

em = document.getElementById("idMapMy");

    // 确保DOM解析完成  
    if(!em || !window.plus || mapMy){return};  
    mapMy = new plus.maps.Map("idMapMy");

就是咯，我也遇到此问题，解决了，关键是Id要一致；

7***@qq.com

请问使用了地图的页面按返回键不会返回到前一个页面要怎么办？

2016-05-02 21:06

vision25

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>发布需求</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />

<link rel="stylesheet" href="../css/myapp.css" />  
<style>  
#idMapMy {  
    width: 100%;  
    position: fixed;  
    top: 45px;  
    height: 200px;  
    line-height: 200px;  
    text-align: center;  
    background: #FFFFFF;  
}  

#idXQBody{  
    width: 100%;  
    position: fixed;  
    top: 245px;  
    bottom: 0px;  
}  

</style>

</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 id="title" class="mui-title">发布需求</h1>
<a id="idRelease" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">发布</a>
</header>

<div class="mui-content">  
    <div id="idMapMy">地图加载中...</div>  
    <div id="idXQBody">  
        <div id='login-form' class="mui-input-group" style="margin-top: 5px;">  
            <ul class="mui-table-view mui-table-view-chevron">  
                <li class="mui-table-view-cell mui-media">  
                    <a class="mui-navigate-right">  
                        <span class="mui-media-object mui-pull-left mui-icon csIconFont iconfont icon-record"></span>  
                        <div class="mui-media-body">  
                            <input id='idDemandTitle' type="text" class="mui-input-clear mui-input" placeholder="我要修电视" style="border-bottom-color: #999999; border-bottom-style: solid; border-bottom-width: 1px;" />  
                        </div>  
                    </a>  
                </li>  
                <li class="mui-table-view-cell mui-media">  
                    <a class="mui-navigate-right">  
                        <span id='idMyAddress' class="mui-media-object mui-pull-left mui-icon csIconFont iconfont icon-address"></span>  
                        <div class="mui-media-body">  
                            <textarea id='idAddress' class="csInputPromptUnderline mui-input-clear mui-input mui-h5" placeholder="我的地址是..." style="height: 50px; border-bottom-color: #999999; border-bottom-style: solid; border-bottom-width: 1px;"> </textarea>  
                        </div>  
                    </a>  
                </li>  
                <li class="mui-table-view-cell mui-media">  
                    <a class="mui-navigate-right">  
                        <span class="mui-media-object mui-pull-left mui-icon csIconFont iconfont icon-history"></span>  
                        <div class="mui-media-body">  
                            <button id='idTime' data-options='{}' class="btn mui-btn" style="height:38px; width: 100%;">选择时间</button>  
                        </div>  
                    </a>  
                </li>  
                <li class="mui-table-view-cell mui-media">  
                    <a class="mui-navigate-right" id='idMyDemand'>  
                        <span class="mui-media-object mui-pull-left mui-icon csIconFont iconfont icon-address"></span>  
                        <div class="mui-media-body">  
                            <span class="mui-h5" style="width: 100%">我的需求</button>  
                        </div>  
                    </a>  
                </li>  
            </ul>  
        </div>  

    </div>  
</div>

</body>
<script src="../js/mui.js"></script>
<script src="../js/app.js"></script>
<script src="../js/mui.picker.min.js"></script>

var em=null, mapMy = null;  
var m_ptUserLocation = null;  
var m_bShowMap = true;  

mui.init({            
    statusBarBackground: BKC_STATUS_BAR  
});  

function plusReady() {  
    // 绑定元素  
    BindElement();  

    // 确保DOM解析完成  
    if(!em || !window.plus || mapMy){return};  
    mapMy = new plus.maps.Map("idMapMy");  

    InitMap();  
    mapMy.onclick = function( point ){  
        //printDebug( JSON.stringify(point) );  
        // {"longitude":114.120335,"latitude":22.561771}  
    }  

    mapMy.onstatuschanged = function( e ){  
        // printDebug( "StatusChanged: "+JSON.stringify(e) );  
        //  StatusChanged: {"target":{"_UUID_":"map31442113527918","_ui_div_id_":"idMapMy","__showUserLocationVisable__":false,"center":{"longitude":114.120335,"latitude":22.561771},"zoom":17,"userLocation":null,"mapType":"MAPTYPE_NORMAL","zoomControlsVisable":false,"trafficVisable":false,"visable":true},"zoom":17,"center":{"longitude":114.120334,"latitude":22.561771},"bounds":{"northease":{"longitude":114.124576,"latitude":22.563957},"southwest":{"longitude":114.116087,"latitude":22.559576}}}  
    }  

    /*  
    webview.addEventListen('hide',function(){  
        webview.clear();  
    });  
    */  

    // 绑定事件  
    BindEvent();  
}  

if (window.plus) {  
    plusReady();  
} else {  
    document.addEventListener('plusready', plusReady, false);  
}  

// 绑定元素  
function BindElement() {  
    em = getEById("idMapMy");  
    domTime = getEById('idTime');  
    domAddress = getEById("idAddress");  
}  

function BindEvent(){  
    // 选择时间  
    domTime.addEventListener('tap', function() {  
        var optionsJson = this.getAttribute('data-options') || '{}';  
        var options = JSON.parse(optionsJson);  
        var id = this.getAttribute('id');  
        /*  
         * 首次显示时实例化组件  
         * 示例为了简洁，将 options 放在了按钮的 dom 上  
         * 也可以直接通过代码声明 optinos 用于实例化 DtPicker  
         */  
        var picker = new mui.DtPicker(options);  
        picker.show(function(rs) {  
            domTime.innerText = '' + rs.text;  
            picker.dispose();  
        });  
    }, false);  

    // 发布  
    getEById("idRelease").addEventListener("tap", function(event){  
        printDebug("-->我要是师傅");  
        mui.openWindow({  
            url: 'release_demand_select_worker.html',  
            id: 'release_demand_select_worker.html',  
            show: {  
                aniShow: 'pop-in'  
            }  
        });  
    });  

    // 我的地址  
    getEById("idMyAddress").addEventListener("tap", function(event){  
        if(null == myMarker){  
            mui.alert("标记定位失败！");  
            return;  
        }  
        printDebug("更新地址:" + JSON.stringify(myMarker) );  
        // 更新地址:{"_UUID_":"marker81442069357041","point":{"longitude":114.120335,"latitude":22.561771},"icon":"../images/map/addr_blue48.png","caption":"我","bubble":null,"canDraggable":false}  
        setAddressByPoint(myMarker.point);  
    });  

    // 我的需求  
    getEById("idMyDemand").addEventListener("tap", function(event){           
        mui.openWindow({  
            url: 'release_demand_info.html',  
            id: 'release_demand_info.html',  
            show: {  
                aniShow: 'pop-in'  
            }  
        });  
    });  
}  

function InitMap() {          
    getUserLocation();        
}  

function setAddressByPoint(point) {  
    plus.maps.Map.reverseGeocode(point, {}, function(event){  
        var szAddr = event.address;         // 转换后的地理位置  
        var point = event.coord;            // 转换后的坐标信息  
        var coordType = event.coordType;    // 转换后的坐标系类型  

        domAddress.value = szAddr;  
        printDebug("Address:"+szAddr);  
        //mui.alert("已更新的地址");  
    },function(e){  
        alert("Failed:"+JSON.stringify(e));  
    });  
}  

// 添加标点  
var m_ptMy = null;  
var myMarker=  null;  
function addMarker(point){  
    if(myMarker){return;}  
    myMarker = new plus.maps.Marker(point);  
    myMarker.setIcon("../images/map/addr_blue64.png");  
    myMarker.setLabel("我");  
    myMarker.setDraggable(true);  
    //var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");  
    //marker.setBubble(bubble);  
    myMarker.onclick = function(oMarker) {  
        printDebug("点了[我]:" + JSON.stringify(oMarker) );  
        // 点了[我]:{"_UUID_":"marker81442069357041","point":{"longitude":114.120335,"latitude":22.561771},"icon":"../images/map/addr_blue48.png","caption":"我","bubble":null,"canDraggable":false}  
        setAddressByPoint(oMarker.point);  
    }  

    mapMy.addOverlay(myMarker);  
}  

// 获取用户的当前位置信息  
function getUserLocation(){  
    mapMy.getUserLocation( function ( state, point ){  
        if( 0 == state ){  
            m_ptUserLocation = point;  
            printDebug( JSON.stringify(point) );  

            mapMy.centerAndZoom(point, 17 );              
            setAddressByPoint(point);                 
            addMarker(point);                 
            return true;  
        }else{  
            alert( "Failed!" );  
            return true;  
        }  
    } );  
}

</script>
</html>

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

plus.maps.Map 错误

3 个回复

公告

相关问题

plus.maps.Map 错误

与内容相关的链接

3 个回复

公告

相关问题