创建百度地图

最新推荐文章于 2022-12-27 13:09:22 发布

xiaoshu611

最新推荐文章于 2022-12-27 13:09:22 发布

阅读量399

点赞数

分类专栏： js 文章标签：百度地图加载周边

本文链接：https://blog.csdn.net/xiaoshu611/article/details/51690694

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!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="width: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",                //高度
        width:"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);
    });

//添加默认缩放平移控件
map.addControl(new BMap.NavigationControl());
//启用滚轮放大缩小，默认禁用
map.enableScrollWheelZoom();
//启用地图惯性拖拽，默认禁用
map.enableContinuousZoom();

//检索周边配套 way渲染div的id
var local = new BMap.LocalSearch(map, {
   renderOptions:{map: map, autoViewport:true, panel:"way"}
});
//百度检索
function search_aim(aim)
{
   return local.searchNearby(aim, new BMap.Point(lng, lat),1000);
}

</script>

xiaoshu611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建百度地图

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>b
复制链接

扫一扫