高德地图的多人定位实现方式

来源:互联网 发布:冒险岛自由市场数据 编辑:程序博客网 时间:2024/04/30 18:00

效果图:



1.html部分:

<li class="jzrow" onclick="jzsetLat()">定位</li>


2.传递数据

function jzsetLat() { //定位
            var ifr = document.getElementById('iframeRight');
            var targetOrigin = '*';  
            var json = [
                {
                    "name": "张三",
                    "address": "天津市南开区红旗路220号慧谷大厦",
                    "dTime": "2016-12-20 10:28",
                    "lngX": "117.1419139142",
                    "latY": "39.1157409540"     
                },
                {
                    "name": "李四",
                    "lngX": "117.181942",
                    "latY": "39.122237",
                    "address": "天津市和平区甘肃路",
                    "dTime": "2016-12-20 06:30"
                }
            ];
            var func = { name: "jzsetLat", arg: json };//传输name名称以及json串
            ifr.contentWindow.postMessage(func, targetOrigin);            
        }


3.js部分(关键)

var marker_dingwei; var windowsArr_dingwei; //定位用到的
function jzsetLat(str) {
    if ($(".righttopdiv-Animation").is(":visible")) {
        $(".righttopdiv-Animation").hide(); //若动画播放层是显示的,则将其隐藏
    }   
    mapObj.clearMap();
    marker_dingwei = []; windowsArr_dingwei = []
    $.each(str, function (index, item) {


        var getlngX = parseFloat(item.lngX); //
        var getlatY = parseFloat(item.latY); //     
        var arr_dingwei = GPS.gcj_encrypt(getlatY, getlngX); //定位,将gps坐标转成火星坐标
        getlngX = arr_dingwei.lon.toFixed(6);
        getlatY = arr_dingwei.lat.toFixed(6);
        //document.write("GCJ-02火星坐标系:" + arr2['lat'] + "," + arr2['lon'] + '<br />');
        //alert(arr_dingwei['lat'] + "," + arr_dingwei['lon']);
        
        var marker_jz = new AMap.Marker({
            map: mapObj,
            content: '<div class=\"shequlat_jz\" onmouseover=\"openMarker_jz_Dingwei(' + index + ',this)\" onmouseout=\"onmouseout_removejz()\" ></div>',
            position: new AMap.LngLat(getlngX, getlatY)
        });
        var infoWindow_jz = new AMap.InfoWindow({
            content: "<div class='arrow-left'><div class='arrowdiv'><div class='arrow-name'>" + item.name + "</div><div class='arrow-close' onclick='closeInfoWindow()'></div></div><div class='arrow-time'>" + item.dTime + "</div><div class='arrow-address'>" + item.address + "</div></div>",
            size: new AMap.Size(230, 70),
            autoMove: true,  //是否自动调整窗体到视野内            
            offset: new AMap.Pixel(123, 38),
            showShadow: false
        });
        //infoWindow_jz.open(mapObj, marker_jz.getPosition());
        //windowsArr_nearby[pointid].open(mapObj, marker_nearby[pointid]);   
        marker_dingwei.push(new AMap.LngLat(getlngX, getlatY));
        windowsArr_dingwei.push(infoWindow_jz);
        marker_jz.setMap(mapObj); //在地图上添加点    
        
        var aa = function (e) { infoWindow_jz.open(mapObj, marker_jz.getPosition()); }; //自定义一个点击方法
        AMap.event.addListener(marker_jz, "click", aa); //当点击定位图标时,打开信息窗口


    });
    mapObj.setFitView(); //适应地图至居中      
}
function openMarker_jz_Dingwei(pointid, thiss) {  //根据id 打开搜索结果点tip  
    //thiss.style.background = '#CAE1FF';
    windowsArr_dingwei[pointid].open(mapObj, marker_dingwei[pointid]);
}
//关闭信息窗体  
function closeInfoWindow() {
    mapObj.clearInfoWindow();
}