百度地图开发自学感想

最新推荐文章于 2021-06-04 10:14:48 发布

weixin_30352645

最新推荐文章于 2021-06-04 10:14:48 发布

阅读量149

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jiangquhan/p/11503128.html

版权

<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html{
height:100%;
}
body{
height:100%;
margin:0px;
padding:0px;
}
/*注意这里如果不设置容器的样式无法显示出来*/
#container{
height: 100%
}
</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=btAZ21QoB2Tov4yFzAAcutTZd45ZbQ3j">
</script>
</head>
<body>

<div id="container"></div>
<script>
// 位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
var map = new BMap.Map("container");
// 设置中心点坐标坐标设置为自己坐标也可以设置其他坐标
var point = new BMap.Point(114.410968,30.482142);
// 地图初始化，同时设置地图展示级别
map.centerAndZoom(point, 15);
// 至此，我们就快速创建了一张以自己的位置为中心的地图~
// 开启鼠标滚轮缩放
//地图的鼠标滚轮缩放默认是关闭的，需要配置开启。
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

//这里添加一些控件
//控件还有一些控件的控制属性
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());

</script>
</body>
</html>

这些是一个简单的事例页面只能显示地图和鼠标滚动缩进还有可以添加一些地图移动控件，设置控件的位置如下。

修改控件配置

地图API的控件提供了丰富的配置参数，您可参考API文档来修改它们以便得到符合要求的控件外观。例如，NavigationControl控件就提供了如下类型：

平移缩放控件的类型

BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移缩放控件

BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件

BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的平移部分功能

BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的缩放部分功能

控制控件位置

初始化控件时，可提供一个可选参数，其中的anchor和offset属性共同控制控件在地图上的位置。 anchor表示控件的停靠位置，即控件停靠在地图的哪个角。当地图尺寸发生变化时，控件会根据停靠位置的不同来调整自己的位置。

anchor值