百度地图json传数信息窗加载数据库图片

function Jsondingwei() {
        map.clearOverlays();
        map.centerAndZoom(new BMap.Point(102.746056, 25.082944), 6);
        $.ajax({
            type: "post",
            url: "pinganlongJWD.ashx",
            dataType: "json",
            success: function (data) {
                if (data != null && data != undefined && data.length > 0) {
                    for (var j = 0; j < data.length; j++) {
                        var p = data[j];
                        var pt = new BMap.Point(p.lon, p.lat);
                        //var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300, 157));
                        var marker2 = new BMap.Marker(pt);  // 创建标注 , { icon: myIcon }


                        (function () {
                            var sContent =
                       "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + p.id + "</h4>" +
                       "<img style='float:right;margin:4px' id='imgDemo' src='" + p.picture + "' width='139' height='104' title='" + p.id + "'/>" +
                       "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" + p.description + "</p>" +
                       "</div>";
                            var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
                            marker2.addEventListener("click", function () {
                                this.openInfoWindow(infoWindow);
                                //图片加载完毕重绘infowindow
                                document.getElementById('imgDemo').onload = function () {
                                    infoWindow.redraw();   //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
                                }
                            });
                            map.addOverlay(marker2);           

 

数据库中的列名,picture用来存储本地图片路径,

图片需要放在项目文件夹下面,这里是放在了资源文件夹下面,只是没有添加到解决方案里,只在文件夹下

生成信息窗图片的主要是这一句

"<img style='float:right;margin:4px' id='imgDemo' src='" + p.picture + "' width='139' height='104' title='" + p.id + "'/>" +

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值