本文主要是笔者自己遇到的问题的解决方法
百度地图Api中的控件
Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
NavigationControl:地图平移缩放控件,PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能。移动端提供缩放控件,默认位于地图右下方。
OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。 ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系。
MapTypeControl:地图类型控件,默认位于地图右上方。 CopyrightControl:版权控件,默认位于地图左下方。
GeolocationControl:定位控件,针对移动端开发,默认位于地图左下方。
百度地图Api中的覆盖物
Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法。
Marker:标注表示地图上的点,可自定义标注的图标。
Label:表示地图上的文本标注,您可以自定义标注的文本内容。
Polyline:表示地图上的折线。
Polygon:表示地图上的多边形。多边形类似于闭合的折线,另外您也可以为其添加填充颜色。
Circle: 表示地图上的圆。
InfoWindow:信息窗口也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息。
注意:同一时刻只能有一个信息窗口在地图上打开。可以使用map.addOverlay方法向地图添加覆盖物,使用map.removeOverlay方法移除覆盖物,注意此方法不适用于InfoWindow。
个人代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#img_test {
width: 100%;
height: 10%;
}
</style>
<script type="text/JavaScript" src="http://api.map.baidu.com/api?v=2.0&ak=LAKYVqkUsb9u7V2hUDftAdQiI8w5OUth">
</script>
<title>BMap_test
</title>
</head>
<body>
<img src="img/img_test2.png" id="img_test">
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
map.centerAndZoom("北京", 5);
setMapEvent();
addMapControl();
map.addControl(new BMap.MapTypeControl());
var point = new BMap.Point(118.696975,32.357007);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
var infoWindow = new BMap.InfoWindow("<p style = font-size 14px;'>我在这,我是不是很帅??</p><p style = font-size 14px;'>其实你不用说我也知道我就是这么帅,哈哈!</p>")
marker.addEventListener("click",function (e) {
this.openInfoWindow(infoWindow);
});
function setMapEvent() {
map.enableScrollWheelZoom();
map.enableKeyboard();
}
function addMapControl() {
var ctrl_nav = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrl_nav);
var ctrl_ove = new BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrl_ove);
var ctrl_sca = new BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrl_sca);
}
</script>
打开网页时
点击标注后
百度地图Api地址:http://lbsyun.baidu.com/index.php?title=jspopular