自定义底部右侧信息支持html,自定义信息窗口.html

html,body{ width: 100%; height: 100%; overflow: hidden; position: relative; margin: 0; padding: 0; }

.map{ width: 100%; height: 100%; }

.modalTitle{ line-height: 30px; padding-bottom: 10px; border-bottom: 1px solid #eee; font-size: 18px; }

.modalContent{ margin-top: 10px; height: 440px; overflow: hidden; overflow-y: scroll; padding-bottom: 10px; }

.modalInfoTitle{ font-size: 14px; line-height: 30px; padding: 0 10px; background-color: #eee; color: #666; border-radius: 4px; border: 1px solid #e6e6e6; }

.modalInfoContent{ font-size: 12px; line-height: 24px; color: #999; margin: 10px 0; }

.modalInfoContent img{ width: 100%; }

/* 左上角 */

.BMap_pop>div:nth-child(1)>div{ border-radius: 10px 0 0 0; }

/* 右上角 */

.BMap_pop>div:nth-child(3)>div{ border-radius: 0 10px 0 0; }

/* 左下角 */

.BMap_pop>div:nth-child(5)>div{ border-radius: 0 0 0 10px; }

/* 右下角 */

.BMap_pop>div:nth-child(7)>div{ border-radius: 0 0 10px 0; }

/* 弹层指向箭头 */

.BMap_pop>div:nth-child(8)>div{ }

/* 弹层内容 */

.BMap_pop>div:nth-child(9)>div{ }

.BMap_pop>div>div{ }

.BMap_pop .BMap_top, .BMap_pop .BMap_center, .BMap_pop .BMap_bottom{ }

自定义图层

$.ajax({

url: "./js/data.json",

type: "GET",

dataType: "JSON",

success: function(data){

}

})

var map = new BMap.Map('map');

var point = new BMap.Point(116.417854,39.921988);

var marker = new BMap.Marker(point);

map.addOverlay(marker);

map.centerAndZoom(point, 14);

map.enableScrollWheelZoom();

var modalTitle = "

弹窗标题

"

var modalHtml = "

"+

"

学校地图

"+

"

"+

"

户籍儿童教育服务区

"+

"

1.石祥路以南，隽家塘河以北，热水港河以东，科园路以西区域内户籍适龄儿童;2.皋亭社区户籍适龄儿童;3.瓜山社区户籍飞股民子女。

"+

"

";

var opts = {

width : 400, // 信息窗口宽度

height: 500, // 信息窗口高度

title : modalTitle , // 信息窗口标题

enableMessage:true,//设置允许信息窗发送短息

message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"

}

var infoWindow = new BMap.InfoWindow(modalHtml, opts); // 创建信息窗口对象

marker.addEventListener("click", function(){

map.openInfoWindow(infoWindow,point); //开启信息窗口

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史