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

最新推荐文章于 2024-09-20 13:50:11 发布

原创最新推荐文章于 2024-09-20 13:50:11 发布 · 5.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

mui

hbuilder

本文介绍了使用HTML5 Plus.maps API实现在地图上定位多个用户位置，并添加自定义标记的方法。通过`plus.maps.Marker`创建标记，并设置地图中心点。示例数据包括多个用户的经纬度坐标。

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"}}
]
}

标签

#mui map