zoukankan      html  css  js  c++  java
  • 百度地图创建自定义覆盖物,点击显示对应信息框

    直接上手一个可以拷贝使用的例子吧。
    <!DOCTYPE html>
    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body,
    html,
    #allmap {
    100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    }

    #l-map {
    height: 100%;
    78%;
    float: left;
    border-right: 2px solid #bcbcbc;
    }

    #r-result {
    height: 100%;
    20%;
    float: left;
    }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&ak=CB2ede775afeb6e413abd40261396a69"></script>
    <title>循环添加多个自定义覆盖物,点击弹出对应信息窗口</title>

    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }

    .q_MapInfo {
    overflow: hidden;
    }

    .q_MapInfo h4 {
    line-height: 25px;
    color: #2b2b2b;
    border-bottom: 1px solid #999;
    font-size: 12px;
    margin-bottom: 5px;
    font-weight: normal;
    }

    .q_infos {
    overflow: hidden;
    }

    .q_infos:after {
    display: block;
    visibility: hidden;
    font-size: 0;
    height: 0;
    content: "";
    clear: both;
    }

    *html .q_infos {
    zoom: 1;
    }

    *html+first-child .q_infos {
    zoom: 1;
    }

    .q_infoLeft {
    float: left;
    200px;
    font-size: 12px;
    line-height: 30px;
    }

    .q_infoLeft p {
    line-height: 30px;
    }

    .q_infoLeft a {
    text-decoration: none;
    color: #2b2b2b;
    }

    .q_infoLeft a:hover {
    color: red;
    }

    .q_infoRight {
    float: right;
    100px;
    height: 75px;
    }

    .q_infoRight img {
    display: block;
    100px;
    height: 75px;
    overflow: hidden;
    }

    .q_infoBot {
    border-top: 1px solid #999;
    }

    .q_infoBot p {
    line-height: 30px;
    }

    .q_infoBot em {
    font-size: 24px;
    font-style: normal;
    color: green;
    }
    </style>
    </head>

    <body>
    <div id="allmap"></div>
    </body>

    </html>
    <script type="text/javascript">
    var mp = new BMap.Map("allmap");
    mp.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    mp.addControl(new BMap.OverviewMapControl({
    isOpen: true,
    anchor: BMAP_ANCHOR_BOTTOM_RIGHT
    })); //右下角,打开
    mp.addControl(new BMap.ScaleControl()); // 添加默认比例尺控件
    mp.addControl(new BMap.ScaleControl({
    anchor: BMAP_ANCHOR_BOTTOM_LEFT
    })); // 左下
    mp.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
    mp.addControl(new BMap.NavigationControl({
    anchor: BMAP_ANCHOR_TOP_LEFT,
    type: BMAP_NAVIGATION_CONTROL_SMALL
    })); //右上角,仅包含平移和缩放按钮
    var point = new BMap.Point(110.803154, 19.559595);
    mp.centerAndZoom(point, 15);
    mp.enableScrollWheelZoom();
    // 复杂的自定义覆盖物
    function ComplexCustomOverlay(point, text, mouseoverText) {
    this._point = point;
    this._text = text;
    this._overText = mouseoverText;
    }
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    ComplexCustomOverlay.prototype.initialize = function(map) {
    this._map = map;
    var div = this._div = document.createElement("div");
    div.style.position = "absolute";
    div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
    div.style.background = "url(img/1.gif) repeat-x 0 -33px";
    div.style.color = "white";
    div.style.height = "21px";
    div.style.padding = "2px";
    div.style.lineHeight = "18px";
    div.style.whiteSpace = "nowrap";
    div.style.MozUserSelect = "none";
    div.style.fontSize = "12px";
    div.style.cursor = "pointer";
    var span = this._span = document.createElement("span");
    div.appendChild(span);
    span.appendChild(document.createTextNode(this._text));
    var that = this;

    var arrow = this._arrow = document.createElement("div");
    arrow.style.background = "url(img/1.gif) no-repeat -8px -100px";
    arrow.style.position = "absolute";
    arrow.style.width = "30px";
    arrow.style.height = "12px";
    arrow.style.top = "19px";
    arrow.style.left = "10px";
    arrow.style.overflow = "hidden";
    div.appendChild(arrow);
    var leftBar = this._leftBar = document.createElement("div");
    leftBar.style.background = "url(img/1.gif) no-repeat -12px -2px";
    leftBar.style.position = "absolute";
    leftBar.style.width = "11px";
    leftBar.style.height = "24px";
    leftBar.style.top = "0px";
    leftBar.style.left = "-10px";
    leftBar.style.overflow = "hidden";
    div.appendChild(leftBar);

    var rightBar = this._rightBar = document.createElement("div");
    rightBar.style.background = "url(img/1.gif) no-repeat -22px -2px";
    rightBar.style.position = "absolute";
    rightBar.style.width = "11px";
    rightBar.style.height = "24px";
    rightBar.style.top = "0px";
    rightBar.style.right = "-10px";
    rightBar.style.overflow = "hidden";
    div.appendChild(rightBar);
    div.onmouseover = function() {
    this.style.background = "url(img/2.gif) repeat-x 0 -33px";
    this.getElementsByTagName("span")[0].innerHTML = that._overText;
    arrow.style.background = "url(img/2.gif) no-repeat -8px -100px";
    leftBar.style.background = "url(img/2.gif) no-repeat -12px -2px";
    rightBar.style.background = "url(img/2.gif) no-repeat -22px -2px";
    }

    div.onmouseout = function() {
    this.style.background = "url(img/1.gif) repeat-x 0 -33px";
    this.getElementsByTagName("span")[0].innerHTML = that._text;
    arrow.style.background = "url(img/1.gif) no-repeat -8px -100px";
    leftBar.style.background = "url(img/1.gif) no-repeat -12px -2px";
    rightBar.style.background = "url(img/1.gif) no-repeat -22px -2px";
    }

    mp.getPanes().labelPane.appendChild(div);
    return div;
    }
    ComplexCustomOverlay.prototype.draw = function() {
    var map = this._map;
    var pixel = map.pointToOverlayPixel(this._point);
    this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
    this._div.style.top = pixel.y - 30 + "px";
    }
    ComplexCustomOverlay.prototype.addEventListener = function(event, fun) {
    this._div['on' + event] = fun;
    }

    //下面开始尝试数组(这是后台输出的数据,这里只能静态写一些做演示。)
    var markerArr = [{
    title: "绿岛",
    content: '<div style="float:left;120px;">起价:6800 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市清澜开发区文清大道北侧(椰子大观园对面)</span> <br><br><a href="/House-show?id=8">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201302/s_510cbb671095a.jpg" wdith="80px" height="75px"></div>',
    point: '110.804978|19.558234',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "中南.森海湾",
    content: '<div style="float:left;120px;">起价:7600 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:海南省文昌市高隆湾旅游大道</span> <br><br><a href="/House-show?id=12">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201301/s_51089eb396bdb.jpg" wdith="80px" height="75px"></div>',
    point: '110.829448|19.548253',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "天御湾",
    content: '<div style="float:left;120px;">起价:4200 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市文航路</span> <br><br><a href="/House-show?id=13">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201301/s_51089bb5d5a2e.jpg" wdith="80px" height="75px"></div>',
    point: '|',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "观澜雅苑",
    content: '<div style="float:left;120px;">起价:5000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市清澜开发区文清大道</span> <br><br><a href="/House-show?id=23">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201301/s_51089f4bdf251.jpg" wdith="80px" height="75px"></div>',
    point: '110.805984|19.555305',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "海拓澜湾",
    content: '<div style="float:left;120px;">起价:10800 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市高隆湾旅游大道</span> <br><br><a href="/House-show?id=15">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201301/s_51089591df37b.jpg" wdith="80px" height="75px"></div>',
    point: '110.815398|19.528834',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "东方·龙湾",
    content: '<div style="float:left;120px;">起价:11000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市文清大道与商贸大道交汇处(文昌市财政局北侧)</span> <br><br><a href="/House-show?id=16">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/" wdith="80px" height="75px"></div>',
    point: '110.816225|19.529311',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "龙禧湾偶寓",
    content: '<div style="float:left;120px;">起价:0 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市清澜开发区文府大道星蓝湾销售部(市政往南200米)</span> <br><br><a href="/House-show?id=18">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201301/s_5108892397125.jpg" wdith="80px" height="75px"></div>',
    point: '110.822585|19.542496',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "白金海岸",
    content: '<div style="float:left;120px;">起价:9600 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市清澜高隆湾旅游大道一环西白金海岸酒店2号楼一层大厅</span> <br><br><a href="/House-show?id=19">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201301/s_51088b505d8e0.jpg" wdith="80px" height="75px"></div>',
    point: '110.823627|19.542291',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "蓝湖海韵",
    content: '<div style="float:left;120px;">起价:7600 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:海南省文昌市清澜开发区惠民路段北侧(现市委市政府旁)</span> <br><br><a href="/House-show?id=20">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201301/s_5107afef650a3.jpg" wdith="80px" height="75px"></div>',
    point: '110.79904|19.552826',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "椰海明珠",
    content: '<div style="float:left;120px;">起价:6980 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌清澜开发区商贸大道南侧(检察院旁边)</span> <br><br><a href="/House-show?id=21">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201302/s_510e428b11dfc.jpg" wdith="80px" height="75px"></div>',
    point: '110.806343|19.555509',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "鑫源锦程",
    content: '<div style="float:left;120px;">起价:6300 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市文城镇文清大道289-1号(市人民法院附近)</span> <br><br><a href="/House-show?id=24">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201301/s_51089ff2db487.jpg" wdith="80px" height="75px"></div>',
    point: '110.793731|19.559222',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "左城右海",
    content: '<div style="float:left;120px;">起价:43000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市文城镇文蔚路(市就业局对面)</span> <br><br><a href="/House-show?id=25">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201302/s_5111ee1759645.jpg" wdith="80px" height="75px"></div>',
    point: '110.763225|19.591205',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "天水星河",
    content: '<div style="float:left;120px;">起价:6200 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:海南省文昌市文航大道南侧</span> <br><br><a href="/House-show?id=26">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/" wdith="80px" height="75px"></div>',
    point: '110.753847|19.637107',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "月亮城",
    content: '<div style="float:left;120px;">起价:6600 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌文城镇文航路中段</span> <br><br><a href="/House-show?id=27">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201302/s_510e3eaf02758.jpg" wdith="80px" height="75px"></div>',
    point: '110.759129|19.636834',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "同仁.红椰湾",
    content: '<div style="float:left;120px;">起价:7000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市文清大道旁</span> <br><br><a href="/House-show?id=28">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/" wdith="80px" height="75px"></div>',
    point: '|',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "天成.夏湾拿",
    content: '<div style="float:left;120px;">起价:7680 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市清澜开发区惠民路16号</span> <br><br><a href="/House-show?id=29">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201302/s_510e3e24d319e.jpg" wdith="80px" height="75px"></div>',
    point: '110.811949|19.551353',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "平海.逸龙湾",
    content: '<div style="float:left;120px;">起价:13000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市清澜高龙湾旅游大道经纬花园</span> <br><br><a href="/House-show?id=30">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201302/s_510e3cbdb456d.jpg" wdith="80px" height="75px"></div>',
    point: '110.827076|19.54362',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "海拓澜湾",
    content: '<div style="float:left;120px;">起价:10800 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市高隆湾旅游大道</span> <br><br><a href="/House-show?id=31">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201302/s_510e3aa4c8b88.jpg" wdith="80px" height="75px"></div>',
    point: '|',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "宏图.高隆湾壹号",
    content: '<div style="float:left;120px;">起价:17346 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:海南省文昌市高隆湾高隆路A号</span> <br><br><a href="/House-show?id=32">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201302/s_510e39b023579.jpg" wdith="80px" height="75px"></div>',
    point: '110.839168|19.548747',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "同创.美兰海岸",
    content: '<div style="float:left;120px;">起价:8000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市清澜开发区高隆湾白金路</span> <br><br><a href="/House-show?id=33">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201302/s_510e36e9de867.jpg" wdith="80px" height="75px"></div>',
    point: '110.812398|19.550161',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "阳光东海岸",
    content: '<div style="float:left;120px;">起价:5200 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市清澜开发区商贸大道(南方电网对面)</span> <br><br><a href="/House-show?id=34">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201302/s_510e32146ea45.jpg" wdith="80px" height="75px"></div>',
    point: '110.810997|19.557459',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "金椰园",
    content: '<div style="float:left;120px;">起价:5500 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌文昌清澜开发区文府路(市政府旁)</span> <br><br><a href="/House-show?id=35">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201302/s_510e30c19ec19.jpg" wdith="80px" height="75px"></div>',
    point: '110.804709|19.548253',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "波溪利亚湾",
    content: '<div style="float:left;120px;">起价:11700 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市清澜区文府路299号(毗邻市政府行政中心)</span> <br><br><a href="/House-show?id=36">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201302/s_510e2f4214df8.jpg" wdith="80px" height="75px"></div>',
    point: '110.817231|19.536704',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "海的理想",
    content: '<div style="float:left;120px;">起价:12000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市文府路</span> <br><br><a href="/House-show?id=37">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/" wdith="80px" height="75px"></div>',
    point: '110.814554|19.519371',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "八一.益园",
    content: '<div style="float:left;120px;">起价:5600 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市清澜开发区白金路</span> <br><br><a href="/House-show?id=38">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/" wdith="80px" height="75px"></div>',
    point: '110.821812|19.546771',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "壹品国际",
    content: '<div style="float:left;120px;">起价:8200 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市文城镇清澜开发区疏港大道</span> <br><br><a href="/House-show?id=39">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201304/s_516cbdaee39df.jpg" wdith="80px" height="75px"></div>',
    point: '110.82819|19.550774',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "叠翠苑",
    content: '<div style="float:left;120px;">起价:6980 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市清澜区文清大道(椰子大观园正对面)</span> <br><br><a href="/House-show?id=40">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201311/s_527b873ceef84.jpg" wdith="80px" height="75px"></div>',
    point: '110.803505|19.557144',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "金山国际",
    content: '<div style="float:left;120px;">起价:6090 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市文府路</span> <br><br><a href="/House-show?id=41">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201304/s_5167bd8f5b942.jpg" wdith="80px" height="75px"></div>',
    point: '110.80584|19.55332',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "森海湾",
    content: '<div style="float:left;120px;">起价:7600 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:海南省文昌市高隆湾旅游大道西侧</span> <br><br><a href="/House-show?id=47">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201304/s_515a8931416d6.jpg" wdith="80px" height="75px"></div>',
    point: '110.83164|19.548287',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "白金海岸",
    content: '<div style="float:left;120px;">起价:9000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:海南省文昌市清澜开发区高隆湾旅游大道一环西</span> <br><br><a href="/House-show?id=48">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201304/s_515eef07be8ff.jpg" wdith="80px" height="75px"></div>',
    point: '110.820752|19.53851',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "宏图高龙湾1号",
    content: '<div style="float:left;120px;">起价:17346 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:海南省文昌市高隆湾高隆路A号 </span> <br><br><a href="/House-show?id=49">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201304/s_515ff7ea67ab7.jpg" wdith="80px" height="75px"></div>',
    point: '110.831352|19.548219',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "东方龙湾",
    content: '<div style="float:left;120px;">起价:11000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市文清大道与商贸大道交汇处(文昌市财政局北)</span> <br><br><a href="/House-show?id=50">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201304/s_515fd4ba30fe1.jpg" wdith="80px" height="75px"></div>',
    point: '110.818453|19.535614',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "乐清湾",
    content: '<div style="float:left;120px;">起价:10000 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:海南省文昌市高隆湾旅游开发区旅游大道乐清湾营销中心</span> <br><br><a href="/House-show?id=51">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201304/s_5163b9689e964.jpg" wdith="80px" height="75px"></div>',
    point: '110.834047|19.555611',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }, {
    title: "海拓澜湾",
    content: '<div style="float:left;120px;">起价:10800 元/平米<br><br><span style="line-height:20px;display:inlin-block;">地址:文昌市高隆湾旅游大道</span> <br><br><a href="/House-show?id=52">查看楼盘详细>></a></div><div style="float:right;80px;"><img src="/Uploads/House/201304/s_5163d26739992.jpg" wdith="80px" height="75px"></div>',
    point: '110.832772|19.546243',
    isOpen: 0,
    icon: {
    w: 21,
    h: 21,
    l: 0,
    t: 0,
    x: 6,
    lb: 5
    }
    }]

    function createInfoWindow(i) {
    var json = markerArr[i];
    var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><p style="+
    'padding - top: 8 px'+
    "><hr></p><div class='iw_poi_content'>" + json.content + "</div>");
    return iw;
    }

    for(var i = 0; i < markerArr.length; i++) {
    var json = markerArr[i]
    var txt = markerArr[i].title;
    var pintx = markerArr[i].point.split('|')[0];
    var pinty = markerArr[i].point.split('|')[1];
    var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(pintx, pinty), txt, txt); //这步是将覆盖物存到变量,以便下面使用。
    mp.addOverlay(myCompOverlay);

    (function() {
    var index = i;
    var p0 = json.point.split("|")[0];
    var p1 = json.point.split("|")[1];
    var point = new BMap.Point(p0, p1);
    var _iw = createInfoWindow(i);
    var _marker = myCompOverlay; //当初存的覆盖物变量,这里派上用场了。
    _marker.addEventListener("click", function(e) {
    mp.openInfoWindow(_iw, point);
    });
    console.log(json.isOpen);
    if(!!json.isOpen) {
    this.openInfoWindow(_iw);
    }
    })()
    }
    </script>

  • 相关阅读:
    Mysql注入绕过姿势
    轻松入侵我学校网站
    华科机考:矩阵转置
    浙大patB习题的一点总结
    链表的一些基本操作
    关于C中函数传参的一点理解
    Java与JavaScript中判断两字符串是否相等的区别
    Jsp中out.println()与System.out.println()的区别
    eclipse背景主题
    Kruskal算法的简单实现
  • 原文地址:https://www.cnblogs.com/haodoubao/p/7170353.html
Copyright © 2011-2022 走看看