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

最新推荐文章于 2024-03-23 14:01:49 发布

孙振光

最新推荐文章于 2024-03-23 14:01:49 发布

阅读量3.3w

点赞数 6

分类专栏：百度文章标签：百度地图实时路况

本文链接：https://blog.csdn.net/sun2015_07_24/article/details/50579692

版权

百度专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图

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>

孙振光

关注

6
点赞
踩
11

收藏

觉得还不错? 一键收藏
7
评论
百度地图-实时路况调用实现

效果图js代码$(function(){ // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.402100, 39.999575); map.centerAndZoom(point, 12); map.enableScrollWheelZo
复制链接

扫一扫

专栏目录