百度地图

这页面中代码

<!-- baidu map -->

<script type="text/javascript">

document.getElementById('loading-msg').innerHTML = '正在加载地图...';

</script>

<link rel="stylesheet" href="resources/css/bmap.css" />

<link rel="stylesheet" href="resources/css/SearchInfoWindow_min.css" />

<script type="text/javascript" src="js/baiduMap/baiduMapAPI.js" ></script>

<script type="text/javascript" src="js/baiduMap/SearchInfoWindow_min.js"></script>

<script type="text/javascript" src="js/baiduMap/TextIconOverlay_min.js"></script>

<div id="map-content">

<div id="map" style="width:800px;height:300px;-webkit-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;"></div>

</div>

<!-- end baidu map -->

在这里可以在线引用所属的js文件

其中：

bmap.css及baiduMapAPI.js在线对应 （引用百度API）

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>

SearchInfoWindow_min.css及SearchInfoWindow_min.js在线对应 （开窗的样式）

<script type="text/javascript" src=

"http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"/>

<link rel="stylesheet" href=

"http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />

TextIconOverlay_min.js在线对应（添加覆盖物样式）

<script type="text/javascript" src=

"http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>

当然还有像mark，icon等等，由于本次的实例没有用到，所以就不做阐述

创建流程

1、 new一个map实例

var map = new BMap.Map("map");

2、 定义首次显示的中心坐标及定义地图显示级别

var point = new BMap.Point(114.099938, 33.590515);

map.centerAndZoom(point, 6);

3、这些定义好后，可以根据需求选择定义地图配置

NavigationControl：地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩放的功能。

OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。

ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。

MapTypeControl：地图类型控件，默认位于地图右上方。

CopyrightControl：版权控件，默认位于地图左下方。

//配置控件参数

//var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}

//map.addControl(new BMap.NavigationControl(opts));

map.addControl(new BMap.NavigationControl());

map.addControl(new BMap.ScaleControl());

map.addControl(new BMap.OverviewMapControl());

map.addControl(new BMap.MapTypeControl());

map.setCurrentCity("河南");

map.enableScrollWheelZoom();//滚轮缩放事件

//map.enableKeyboard(); //键盘方向键缩放事件

map.enableContinuousZoom(); // 开启连续缩放效果

//map.enableInertialDragging();　// 开启惯性拖拽效果

3、 我们可以看到一个简单的地图了，但是，我们有的时候可能需要添加覆盖物，这时我们可以用两种方式icon和自带插件texticon等等。这里用到时texticon

a) 定义覆盖物样式

var myStyles = [{

url: 'resources/images/building.png',

size: new BMap.Size(28, 28),

opt_anchor: [16, 0],

textColor: '#ff00ff',

opt_textSize: 10

}];

BMapLib.TextIconOverlay.prototype.getStyleByText = function (text, styles) {

return styles[0];

};

b) 开始定义显示坐标

var tio_hn = new BMapLib.TextIconOverlay(new BMap.Point(113.560393, 34.492992), 0, { styles: myStyles });

map.addOverlay(tio_hn);

4、 创建显示窗口

createSearchInfoWindow("河南省").open(new BMap.Point(113.560393, 34.492992)); //在marker上打开检索信息串口

//创建检索信息窗口对象

tio_hn.addEventListener("click", function(e){

var luoheWindow = createSearchInfoWindow("河南省");

luoheWindow.open(new BMap.Point(114.099938, 33.590515));

})

function createSearchInfoWindow(title){

var content = '<div style="margin:0;line-height:20px;padding:2px;">' +

'<img src="resources/images/title.gif" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +

'今日耗能情况：<br/>今日耗电量：1045kwh<br/>今日耗电量：1045kwh<br/>今日耗电量：1045kwh<br/>今日耗电量：1045kwh' +

'</div>';

return new BMapLib.SearchInfoWindow(map, content, {

title : title, //标题

width : 290, //宽度

height : 120, //高度

panel : "panel", //检索结果面板

enableAutoPan : true, //自动平移

searchTypes :[

// BMAPLIB_TAB_SEARCH, //周边检索

// BMAPLIB_TAB_TO_HERE, //到这里去

// BMAPLIB_TAB_FROM_HERE //从这里出发

]

});

}