高德地图调用

x33g5p2x  于2021-11-19 转载在 其他  
字(1.0k)|赞(0)|评价(0)|浏览(202)

一 数据库关键数据

VISIT_LOCATION:拜访位置

VISIT_LOCATION_LON:拜访位置坐标经度

VISIT_LOCATION_LAT:拜访位置坐标纬度

二 前端关键代码

{
    field: 'id', title: '操作', align: 'center', valign: 'middle', clickToSelect: false,
    formatter: function (value, row) {
        var html = '<div class=" action-buttons">';
        if (row.visitLocationLon != undefined && row.visitLocationLon != null && row.visitLocationLon != '' && row.visitLocationLat != undefined && row.visitLocationLat != null && row.visitLocationLat != '') {
            html += '<a href="javascript:showMap(\'' + row.visitLocationLon + ',' + row.visitLocationLat + '\',\'' + row.visitLocation + '\');" class="btn btn-xs btn-info" style="margin: 2px;"><i class="icon-edit bigger-120"></i>查看地图</a>';
        }
        html += '</div>';
        return html;
    }
}

点击查看地图,会调用 showMap 函数,显示地图。

// 显示地图
function showMap(loc, locTxt) {
    $('#visitLocTxt').text('签到位置:' + locTxt);
    $('#iframe-map').attr('src', 'https://m.amap.com/navi/?dest=' + loc + '&destName=签到位置&hideRouteIcon=1&key=XXXXXXXXXXXXXXXXX');
    $('#modal-map').modal('show');
}

三 测试效果

相关文章

微信公众号

最新文章

更多