百度地图使用心得

1 在使用百度地图是，首先的申请密钥（ak）才能成功加载API JS文件。

ak的使用方法： < script src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥" type = "text/javascript" ></ script >

2 移动端使用地图：

将地图容器高设置为100%，使其充满整个屏幕，或者您也可以计算浏览器窗口的大小并进行设置。

添加meta标签， <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 这样做是为了让页面以正常比例进行显示并且禁止用户缩放页面的操作。

3 异步加载地图：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> 异步加载 </title>
<script type="text/javascript">
function initialize() {
var mp = new BMap.Map('map');
mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
}
function loadScript() {
var script = document.createElement("script");
script.src = "http://api.map.baidu.com/api?v=2.0 &ak=您的密钥&callback=initialize"; //此为v2.0版本的引用方式
// http://api.map.baidu.com/api?v=1.4 &ak=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map" style="width:500px;height:320px"></div>
</body>
</html>

4 非百度地图的坐标需要转换成百度坐标

var points = [new BMap.Point(116.3786889372559,39.90762965106183),

new BMap.Point(116.38632786853032,39.90795884517671),

new BMap.Point(116.39534009082035,39.907432133833574),

new BMap.Point(116.40624058825688,39.90789300648029),

new BMap.Point(116.41413701159672,39.90795884517671)

];

//地图初始化

var bm = new BMap.Map("allmap");

bm.centerAndZoom(new BMap.Point(116.378688937,39.9076296510), 15);

//坐标转换完之后的回调函数

translateCallback = function (data){

if(data.status === 0) {

for (var i = 0; i < data.points.length; i++) {

bm.addOverlay(new BMap.Marker(data.points[i]));

bm.setCenter(data.points[i]);

}

setTimeout(function(){

var convertor = new BMap.Convertor();

convertor.translate(points, 1, 5, translateCallback)

}, 1000);

</script>

5 给地图添加控件：

使用Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。

代码：

var map = new BMap. Map ( "容器id" ) ;

         map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    //中心点坐标 ，层级
         map.addControl(new BMap.NavigationControl());      //添加地图控件

map.addControl(new BMap.NavigationControl());    //添加平移缩放控件

         map.addControl(new BMap.ScaleControl());         //添加比例尺控件
         map.addControl(new BMap.OverviewMapControl());    //添加缩略地图控件
         map.addControl(new BMap.MapTypeControl());        //添加地图类型控件

         map.disable3DBuilding();
	 map.centerAndZoom(point, 14);

         map.enableScrollWheelZoom();                      //添加滚轮放大缩小

添加自定义控件

添加自定义控件与添加其他控件方法一致，调用map.addControl()方法即可。

    // 创建控件实例    
    var myZoomCtrl = new ZoomControl();

// 添加到地图当中 map.addControl(myZoomCtrl);

6 控件的位置：

控件的位置是由anchor和offset属性一起控制的；

anchor允许的值为：

BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。

BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。

BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。

BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。

offset：

var opts = { offset : new BMap. Size ( 150 , 5 ) }

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

7 地图添加覆盖物：

Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。

Marker：标注表示地图上的点，可自定义标注的图标。

Label：表示地图上的文本标注，您可以自定义标注的文本内容。

Polyline：表示地图上的折线。

Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。

Circle: 表示地图上的圆。

InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。

注：可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物，注意此方法不适用于InfoWindow。

百度地图使用心得

猜你喜欢