zoukankan      html  css  js  c++  java
  • 【百度地图API】——如何用label制作简易的房产标签

    转:http://www.cnblogs.com/milkmap/archive/2011/08/24/2151073.html

    摘要:

      最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义。有没有快速简易创建房产标签的方法呢?

      答案当然是有的啦~

      我们可以利用label嘛!

    -------------------------------------------------------------------------------

    一、创建地图

    这是老生常谈的三句话,初始化地图的js。

    var map = new BMap.Map("container");    //创建地图容器 var point = new BMap.Point(116.404, 39.915);        //创建一个点 map.centerAndZoom(point, 15);                       //设立中心点和地图级别,就是初始化地图

      

    二、添加文本标签

    var myLabel = new BMap.Label("海辉房产 21000元",     //为lable填写内容     {offset:new BMap.Size(-60,-60),                  //label的偏移量,为了让label的中心显示在点上     position:point});                                //label的位置  myLabel.setTitle("我是文本标注label");               //为label添加鼠标提示 map.addOverlay(myLabel);                             //把label添加到地图上

      

    文本标注默认的样子是这样滴,如下图:

     
    我觉得label最棒的一点是,它不仅仅是文本标签而已,还能写成<a></a>链接的方式。
    这样,你的label可以链接到任意一个网页上。
    var myLabel = new BMap.Label("<a href='http://dev.baidu.com/wiki/static/index.htm'>百度地图API 0元</a>",     //为lable填写内容

      

    三、设置文本标签的样式。关键!!!

    创建完毕的房产标注见上图,你可以更换图片,让房产标签看起来更好看!!

    以下的代码,用来设置lable的CSS。你可以书写任意的CSS,注意,如果是font-size这样的CSS属性,你要写成驼峰式,fontSize这样的,才能被识别。

    按 Ctrl+C 复制代码
    按 Ctrl+C 复制代码

      

    四、全部源代码

    复制代码
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>label制作</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> </head> <body> <div style="800px;height:500px;border:1px solid gray" id="container"></div> </body> </html> <script type="text/javascript"> var map = new BMap.Map("container");    //创建地图容器 var point = new BMap.Point(116.404, 39.915);        //创建一个点 map.centerAndZoom(point, 15);                       //设立中心点和地图级别,就是初始化地图 var myLabel = new BMap.Label("<a style='color:red;text-decoration:none' target='_blank' href='http://dev.baidu.com/wiki/static/index.htm'>百度地图API 0元</a>",     //为lable填写内容     {offset:new BMap.Size(-60,-60),                  //label的偏移量,为了让label的中心显示在点上     position:point});                                //label的位置 myLabel.setStyle({                                   //给label设置样式,任意的CSS都是可以的     fontSize:"14px",               //字号     border:"0",                    //     height:"120px",                //高度     "125px",                 //     textAlign:"center",            //文字水平居中显示     lineHeight:"120px",            //行高,文字垂直居中显示     background:"url(http://cdn1.iconfinder.com/data/icons/CrystalClear/128x128/actions/gohome.png)",    //背景图片,这是房产标注的关键!     cursor:"pointer" }); myLabel.setTitle("我是文本标注label");               //为label添加鼠标提示 map.addOverlay(myLabel);                             //把label添加到地图上 
    var infoWindow = new BMap.InfoWindow("<p style='font-size:12px;lineheight:1.8em;'>我是lable打开的信息窗口 <img src='http://dev.baidu.com/wiki/static/static/img/new.gif' /></p>"); // 创建信息窗口对象 myLabel.addEventListener("click", function(){ map.openInfoWindow(infoWindow, point); }); </script>
    复制代码

      

    -----------------------------------------------------------------------------------------------

    不过,用label制作的房产标注,毕竟不是正规标注marker,而是文字标签label。所以,会有一些小缺陷。

    如果你能忍受它们,那就大胆地使用label吧~

    1、不能像marker那样,能拖动。enableDragging

    2、设置不了a:hover,就是说鼠标放到label上时,背景图片不能变。

    3、不能添加信息窗口(谢谢JZ1108的提醒,lable是可以添加信息窗口的~)2011.8.26更新

    var infoWindow = new BMap.InfoWindow("<p style='font-size:12px;lineheight:1.8em;'>我是lable打开的信息窗口  <img src='http://dev.baidu.com/wiki/static/static/img/new.gif' /></p>");  // 创建信息窗口对象 myLabel.addEventListener("click", function(){       map.openInfoWindow(infoWindow, point);   });  

      

    如果你忍受不了以上两点,请使用自定义marker来制作房产标注。虽然代码看上去有点儿多。但条理很清晰~

    【百度地图API】你看过房产地图吗?你知道房产标注是如何建立的吗?

    http://www.cnblogs.com/milkmap/archive/2011/04/18/2019906.html

  • 相关阅读:
    30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)(转载)
    JavaScript事件流原理解析
    Java中this和super的用法和区别
    Java多态面试题案例几解题思路
    Java多态的向上转型和向下转型
    Java方法的重载和重写
    Java冒泡具体的原理,以及下标的变化
    Java中的冒泡排序和选择排序
    使用Java实现对一个数组的增删改查以及初始化
    Java中构造函数传参数在基本数据类型和引用类型之间的区别
  • 原文地址:https://www.cnblogs.com/lihaibo-Leao/p/4575005.html
Copyright © 2011-2022 走看看