当前位置需另行后台传入
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>（按钮）</title>
</head>
<body >
<div>
<fieldset >
（附近11）
</fieldset>
<fieldset>
<div style="min-height: 400px; width: 100%;" id="map">
</div>
<script type="text/javascript">
var map; //Map实例
//后台传过来
var currentLat = 116.345555;
var currentLon = 40.018661;
var my ={ title: "我的位置"};
var markerArr = [
{ title: "华联1", point: "116.364531,40.057003"},
{ title: "<span style="font-family: Arial, Helvetica, sans-serif;">华联2</span><span style="font-family: Arial, Helvetica, sans-serif;">",point: "116.340934,40.013401"},</span>
{ title: "华润3", point: "116.342213,40.047267"}
];
function map_init() {
map = new BMap.Map("map");
//第1步：设置地图中心点，当前城市
var point = new BMap.Point(currentLat,currentLon);
//第2步：初始化地图,设置中心点坐标和地图级别。
map.centerAndZoom(point, 14);
//第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]);
}
//<span style="font-family: Arial, Helvetica, sans-serif;">第8步：</span><span style="font-family: Arial, Helvetica, sans-serif;">我的位置</span>
var mymaker = addMarker(new window.BMap.Point(currentLat, currentLon), 10);
addInfoWindow(mymaker, my);
// 添加信息窗口
function addInfoWindow(marker, poi) {
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
var label = new window.BMap.Label(poi.title, { offset: new window.BMap.Size(20, -10) });
marker.setLabel(label);
var clo="";
if("我的位置"==poi.title){
clo="#FF5782";
}else{
clo="#E6FED";
}
var info = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;color:"+clo+";’>" +poi.title+ "</p>"); // 创建信息窗口对象
marker.addEventListener("mouseover", openInfoWinFun);
var openInfoWinFun = function () {
this.openInfoWindow(info);
};
}
}
// 添加标注
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;
}
//异步调用百度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>
</fieldset>
</div>
</body>
</html>
版权声明：本文为changliangwl原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。