百度地图-实时路况调用实现

来源：互联网发布：java自动化部署编辑：程序博客网时间：2024/04/27 22:28

效果图

js代码

$(function(){    // 百度地图API功能    var map = new BMap.Map("allmap");    var point = new BMap.Point(116.402100, 39.999575);    map.centerAndZoom(point, 12);    map.enableScrollWheelZoom();    var content = '<div style="margin:0;line-height:20px;padding:2px;">' +        '<img src="/assets/img/convenience/niaocao.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +        '地址：安定路甲3号(北京奥林匹克公园内,亚运村北)<br/>电话：010-84373008<br>标签：运动健身 体育场馆' + '</div>';    //会跳动的标注    var marker = new BMap.Marker(point);  // 创建标注    map.addOverlay(marker);               // 将标注添加到地图中    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画    //单个检索    var local = new BMap.LocalSearch(map, {        renderOptions:{            map: map,            autoViewport: false,  //自动搜索视野            selectFirstResult: false //是否指定第一个目标        }    });    local.search("医院");    //创建检索信息窗口对象    var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, content, {        title  : "国家体育场(鸟巢)",  //标题        width  : 290,             //宽度        height : 100,             //高度        panel  : "panel",         //检索结果面板        enableAutoPan : true,     //自动平移        searchTypes   :[            BMAPLIB_TAB_SEARCH,   //周边检索            BMAPLIB_TAB_TO_HERE,  //到这里去            BMAPLIB_TAB_FROM_HERE //从这里出发        ]    });    marker.enableDragging(); //marker可拖拽    marker.addEventListener("click", function(){        searchInfoWindow3.open(point); //开启信息窗口    });});

css代码

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

body代码

<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /><script type="text/javascript" charset="utf-8" src="<%=basePath %>js/jquery-1.9.1.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8Ydw4v3ZSG8hcMdv3RZjVLuG"></script><script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script><script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>

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

1 0