html引入js
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
只需要一个div即可
<div id="allmap" class="mapContent" style="position:absolute;"></div>
var map;// 地图 function createMap() { map = new BMap.Map('allmap'); //创建地图 //var point = new BMap.Point(117.1210,39.0805); //定义中心点 //map.centerAndZoom(point, 11); map.centerAndZoom(city,11); map.setMinZoom(8); map.setMaxZoom(17); var top_right_navigation = new BMap.NavigationControl({ anchor : BMAP_ANCHOR_TOP_RIGHT }); map.addControl(top_right_navigation); enableScrollWheelZoom(); enableContinuousZoom(); map.addEventListener("click", function(){ //点击事件 byId("result").style.display='none'; }); }
//增加信息窗口
function addMarkWithInfoForPoint(obj) { var longitude = obj.longitude; var latitude = obj.latitude; var sectionName=obj.sectionName; var roadName=obj.roadName; var direction=obj.sectionDirection; var type=sectionTypeSwitch(obj.sectionDoubleBase); var marker = new BMap.Marker(new BMap.Point(longitude, latitude)); // 创建标注 if(obj.sectionPicture==""||obj.sectionPicture=="null"||obj.sectionPicture==null){ var opts = { width : 100, // 信息窗口宽度 height : 180, // 信息窗口高度 title : "<div style='float:left;margin-top:20px'>名称:"+ sectionName+"<br/>路口:"+roadName+"</br>方向:"+direction+"</br>经度:"+longitude+"<br/>纬度:"+latitude+"<br/>类型:"+type+"<br/></div><div style='float:right;margin-top:18px;'><img src='../../../../collectionPointPhoto/miss.png' style='width:100px;height:110px'/></div>" } }else{ var opts = { width : 100, // 信息窗口宽度 height : 180, // 信息窗口高度 title : "<div style='float:left;margin-top:20px'>名称:"+ sectionName+"<br/>路口:"+roadName+"</br>方向:"+direction+"</br>经度:"+longitude+"<br/>纬度:"+latitude+"<br/>类型:"+type+"<br/></div><div style='float:right;margin-top:18px;'><img src='../../../../collectionPointPhoto/"+obj.sectionPicture+"' style='width:100px;height:110px'/></div>" } } var infoWindow = new BMap.InfoWindow("", opts); // 创建信息窗口对象 marker.addEventListener("onclick", function() { marker.openInfoWindow(infoWindow); // 开启信息窗口 }); // marker.addEventListener("onclick", function() { // setTimeout(function() { // marker.closeInfoWindow(infoWindow); // 关闭信息窗口 // }, 3000); // }); //自定义断面的图片 // var grayIcon = new BMap.Icon("../images/marker_red.png",new BMap.Size(19, 25), { // // offset: new BMap.Size(0, -5), //相当于CSS精灵 // anchor : new BMap.Size(10, 25), // infoWindowAnchor : new BMap.Size(10, 0), // imageOffset : new BMap.Size(0, 0) // // 图片的偏移量。为了是图片底部中心对准坐标点。 // }); // // // marker.setIcon(grayIcon); map.addOverlay(marker); if(obj.condition==1){ marker.openInfoWindow(infoWindow); // 开启信息窗口 } }
/** * 启用滚轮放大缩小 */ function enableScrollWheelZoom() { map.enableScrollWheelZoom(); } /** * 启用连续缩放效果 */ function enableContinuousZoom() { map.enableContinuousZoom(); }
