首页 新闻 会员 周边 捐助

高德地图JS API 问题之自定义信息窗无法定位到标记上

0
悬赏园豆:10 [已解决问题] 解决于 2018-12-18 11:14

图片不能上传了,我就不上图了
看代码吧,代码如下:
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.0&key=我自己申请的key&callback=init"></script>
function init() {
// 创建地图实例
var map = new AMap.Map("mapDiv", {
zoom: 15,
center: [@(Model.coordinate)],
resizeEnable: true
});

                addMarker();

                function addMarker() {
                    // 点标记显示内容,HTML要素字符串
                    var markerContent = '<div class="labeledMarkerStyle2">' +
                        '<span>' +
                        '<a href="javascript:void(0);">' +
                        '<table id="tip38521" cellspacing="0" cellpadding="0" border="0">' +
                        '<tbody>' +
                        '<tr>' +
                        '<td class="s1">&nbsp;</td>' +
                        '<td class="s2">@(Model.proname)</td>' +
                        '<td class="s3">&nbsp;</td>' +
                        '</tr>' +
                        '<tr>' +
                        '<td colspan="3" class="s5"></td>' +
                        '</tr>' +
                        '</tbody>' +
                        '</table>' +
                        '</a>' +
                        '</span>' +
                        '</div>';

                    var marker = new AMap.Marker({
                        map: map,
                        position: [@(Model.coordinate)],
                        // 将 html 传给 content
                        content: markerContent,
                        // 以 icon 的 [center bottom] 为原点
                        offset: new AMap.Pixel(-13, -30)
                    });

                    // 将 markers 添加到地图
                    map.add(marker);

                    AMap.event.addListener(marker, 'click', function () {
                        infoWindow.open(map, marker.getPosition());
                    });
                }
                //实例化信息窗体
                var title = '@(Model.proname)',
                    content = [];
                content.push('参考价格:<font style="color: #FF6600; font-family: Arial; font-size: 18px; font-weight: bold;">@(Model.price==null?"待定":Model.price+"元/平方")</font><br>');
                content.push('销售状态:@(Model.sales_status)<br>');
                content.push('物业类型:@(Model.property_type)<br>');
                content.push('所属区域:@(Model.area)<br>');
                content.push('开盘时间:@(Model.kp_time==null?"暂无资料":Model.kp_time.Value.ToString("yyyy年MM月dd日"))<br>');
                content.push('销售电话:<font style="color: #FF6600; font-family: Arial; font-size: 16px; font-weight: bold;">@(string.IsNullOrWhiteSpace(Model.sales_tel)?"暂无资料":Model.sales_tel)</font>');

                cover = [];
                cover.push('<a href="@Url.Action("Detail","NewHouses",new { Id=Model.id})" target="_blank"><img src="@(Model.img)" width="166" height="140" border="0"></a>');

                linkline = [];
                linkline.push('[<a href="@Url.Action("Detail","NewHouses",new { Id=Model.id})" class="D4D4" target="_blank">楼盘详情</a>]');
                linkline.push('[<a href="/NewHouses/Detail/@(Model.id)#dt" class="D4D4" target="_blank">周边查询</a>]');
                linkline.push('[<a href="@Url.Action("Detail2","NewHouses",new { Id=Model.id})" class="D4D4" target="_blank">楼盘快讯</a>]');
                var infoWindow = new AMap.InfoWindow({
                    isCustom: true,  //使用自定义窗体
                    position: [@(Model.coordinate)],
                    content: createInfoWindow(),
                    size: new AMap.Size(410, 0),
                    offset: new AMap.Pixel(10, -33)
                });

                //构建自定义信息窗体
                function createInfoWindow() {

                    //可以通过下面的方式修改自定义窗体的宽高
                    //info.style.width = "400px";
                    // 定义顶部标题
                    var firstout = document.createElement("div");
                    firstout.className = "amap-overlays";

                    var outout = document.createElement("div");
                    outout.className = "amap-info outout";

                    var outtop = document.createElement("div");
                    outtop.className = "outtop";
                    //外围
                    var out = document.createElement("div");
                    out.className = "out";
                    var out1 = document.createElement("div");
                    //内围
                    var nei = document.createElement("div");
                    nei.className = "amap-info-content amap-info-outer";
                    nei.style.width = "410px;";
                    //标题
                    var titleD = document.createElement("div");
                    titleD.className = "titleD";
                    titleD.innerHTML = title;
                    nei.appendChild(titleD);
                    //标题下的分割线
                    var titleline = document.createElement("div");
                    titleline.className = "titleLine";
                    nei.appendChild(titleline);
                    //内容
                    var middle = document.createElement("div");
                    middle.className = "content";
                    middle.innerHTML = content;
                    nei.appendChild(middle);
                    //封面
                    var img = document.createElement("div");
                    img.className = "img";
                    img.innerHTML = cover;
                    nei.appendChild(img);
                    //底部链接
                    var link = document.createElement("div");
                    link.className = "link";
                    link.innerHTML = linkline;
                    nei.appendChild(link);
                    //关闭
                    var closeX = document.createElement("a");
                    closeX.className = "amap-info-close";
                    closeX.id = "close";
                    closeX.innerHTML = "×";
                    closeX.onclick = closeInfoWindow;

                    // 定义底部内容
                    var bottom = document.createElement("div");
                    bottom.className = "amap-info-sharp";
                    bottom.style.height = '23px';

                    out1.appendChild(nei);
                    out1.appendChild(closeX);
                    out1.appendChild(bottom);
                    out.appendChild(out1);
                    outout.appendChild(outtop);
                    outout.appendChild(out);
                    firstout.appendChild(outout)
                    return firstout;
                }

                //关闭信息窗体
                function closeInfoWindow() {
                    map.clearInfoWindow();
                }
            }

拜托了

恶之必要的主页 恶之必要 | 初学一级 | 园豆:165
提问于:2018-12-15 17:37
< >
分享
最佳答案
0

修改自定义信息窗体的offset属性
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(10, -33)
});

恶之必要 | 初学一级 |园豆:165 | 2018-12-18 11:14
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册