HTML5+ plus.maps地图定位,标记多个自定义mark及mark点击(附官方文档链接)

http://www.html5plus.org/doc/zh_cn/maps.html

http://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Map

(PS:别骂我,每次搜都一点点的资料,看不到文档,自己备注下文档链接)


mui.init(function(){
    swipeBack: false
})
mui.plusReady(function() {
    map = new plus.maps.Map("tracking_map");//你的div的id

    map.setZoom(18);

    //开启用户位置显示

    userLocation();

    mui.ajax({
            type: "get",
            url: "tracking.json",
            async: true,
            data: "",
            dataType: "json",
            jsonp: "callback",
            success: function(data) {
                    for(var i = 0; i < data.track.length; i ++){

                         var marker = new plus.maps.Marker(new plus.maps.Point(data.track[i].point.lon, data.track[i].point.lat));

//标注点对象

                                if(mui.os.ios){
                                    marker.setIcon("imgs/person_point_ios.png");
                                } else {
                                    marker.setIcon("imgs/person_point_android.png");
                                 }
                                marker.setLabel(data.track[i].name);
                                marker.setPoint()
//                              var bubble = new plus.maps.Bubble(data.track[i].id);
//                             marker.setBubble(bubble);
                                marker.onclick=function(){
                                        alert("data.track[i].name"+this.getLabel());
                                }
                                map.addOverlay(marker);
                        }
            // map.getMarks()[1].onclick=function(){
            // alert("data.track[i].name"+this.label);
            // }
        },
        error: function(e) {
            console.log(e);
        }
    });

    // center = new plus.maps.Point(116.3122091550,40.0449179832);//获取当前用户定位需要申请appkey,

    //此位置是用来暂时测试用的

    //设置地图中心点 

    // map.setCenter(center);
});


function userLocation() { //当前用户定位
    if(null == map) {
        return
    };
    // map.showUserLocation(true);
    map.getUserLocation(function(state, pos) {
            if(0 == state) {
                console.log("pos.latitude:" + pos.latitude);
                console.log("pos.longitude:" + pos.longitude); 
                var marker = new plus.maps.Marker(new plus.maps.Point(pos.longitude, pos.latitude));//标注点对象
                if(mui.os.ios){
                    marker.setIcon("imgs/mypoint_ios.png");
                } else {
                    marker.setIcon("imgs/mypoint_android.png");
                }
                marker.setDraggable(true);
                marker.onclick = function(){
                        alert("mypoint");
                }
                map.addOverlay(marker);
                map.setCenter(pos);
        }
    });

}


{
"track":
[
{ "name":"user1","id":"1","point":{"lon":"116.3122091550","lat":"40.0449179832"}},
{ "name":"user2","id":"1","point":{"lon":"116.3035343776","lat":"40.0504881037"}},
{ "name":"user3","id":"1","point":{"lon":"116.3153676175","lat":"40.0503495128"}},
{ "name":"user4","id":"1","point":{"lon":"116.3122772135","lat":"40.0523291446"}},
{ "name":"user5","id":"1","point":{"lon":"116.3128570699","lat":"40.0456512673"}}
]

猜你喜欢

转载自blog.csdn.net/csdnwr/article/details/80987152