<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>百度地图API显示多个标注点带提示的代码</title> <!--javascript-->
<script src="http://www.w3school.com.cn/jquery/jquery.js" type="text/javascript"></script>
</head>
<body>
<div style="min-height: 600px; width: 100%;" id="map">
</div>
<script type="text/javascript">
var markerArr = [
{ title: "名称：武汉光谷", point: "114.4204800000, 30.4637200000", address: "光谷广场", tel: "12306" },
{ title: "名称：武汉汉口", point: "114.2549200000,30.6188900000", address: "汉口齐测试 ", tel: "18500000000" },
{ title: "名称：武汉火车站", point: "114.4044400000,30.5074100000", address: "武汉火车站的吧房间", tel: "18500000000" },
{ title: "名称：武汉纺织大学", point: "114.3982300000,30.4857900000", address: "武汉天河广场", tel: "18500000000" }
]; var map; //Map实例
function map_init() {
map = new BMap.Map("map");
//第1步：设置地图中心点，武汉日创科技
var point = new BMap.Point(114.4089600000,30.4754800000);
//第2步：初始化地图,设置中心点坐标和地图级别。
map.centerAndZoom(point, 11);
//第3步：启用滚轮放大缩小
map.enableScrollWheelZoom(true);
//第4步：向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//第5步：向地图中添加缩略图控件
var ctrlOve = new window.BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrlOve); //第6步：向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca); //第7步：绘制点
for (var i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].point.split(",")[0];
var p1 = markerArr[i].point.split(",")[1];
var maker = addMarker(new window.BMap.Point(p0, p1), i);
addInfoWindow(maker, markerArr[i], i);
} } // 添加标注
function addMarker(point, index) {
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0 - index * 25)
});
var marker = new BMap.Marker(point, { icon: myIcon });
map.addOverlay(marker);
return marker;
} // 添加信息窗口
function addInfoWindow(marker, poi) {
//pop弹窗标题
var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>';
//pop弹窗信息
var html = [];
html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
html.push('<tr>');
html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');
html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>');
html.push('</tr>');
html.push('</tbody></table>');
var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 }); var openInfoWinFun = function () {
marker.openInfoWindow(infoWindow);
};
marker.addEventListener("mouseover", openInfoWinFun);
return openInfoWinFun;
} //异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
document.body.appendChild(load);
}
window.onload = map_load;
</script> </body>
</html>
2.百度地图显示单个标注点带提示的代码
<script>
//创建map实例
var map=new BMap.Map('container');
//创建点坐标，维度，精度
var point=new BMap.Point(114.4120690000,30.4807520000);
//初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point,15);
//创建标注
var marker=new BMap.Marker(point);
//将标注添加到地图中
map.addOverlay(marker);
var circle=new BMap.Circle(point,300,{
fillColor:"blue",
fillOpacity:0.3,
stokeColor:"blue",
strokeOpacity:0.5,
strokeWeight:1
});
map.addOverlay(circle);
var scaleControl = new BMap.ScaleControl();
map.addControl(scaleControl);// 添加比例尺显示控件
var infoWindow=new BMap.InfoWindow("这是武汉日创科技有限公司",{
width:100,
height:50
});
marker.addEventListener("click",function(){
map.openInfoWindow(infoWindow,point);
})
var label = new BMap.Label("这是武汉日创科技有限公司", {//标签内容与标签偏移
offset : new BMap.Size(20, -10)
});
marker.setLabel(label);
//创建标注
var point2=new BMap.Point(114,30);
var marker2=new BMap.Marker(point2);
//将标注添加到地图中
map.addOverlay(marker2);
</script>3.将经纬度转化成具体地址
function map_click(lng,lat){
var map = new BMap.Map(“allmap”);
var point = new BMap.Point(lng,lat);
map.centerAndZoom(point,12);
var geoc = new BMap.Geocoder();
geoc.getLocation(point,function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + “, ” + addComp.city + “, ” + addComp.district + “, ” + addComp.street + “, ” + addComp.streetNumber);
});
}
map_click(104.098225,30.56028);
//参数解析
//@parameter1 lng 传入的经度
//@parameter2 lat 传入的纬度