您的位置：首页 > 其它

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

2016-01-25 14:14 519 查看

效果图

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航