百度地图－修改marker图标(icon)及同时显示多点

最新推荐文章于 2024-06-06 15:03:41 发布

changliangwl

最新推荐文章于 2024-06-06 15:03:41 发布

阅读量3.2w

点赞数

分类专栏：百度 jsapi

本文链接：https://blog.csdn.net/changliangwl/article/details/51576222

版权

百度 jsapi 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

当前位置需另行后台传入

<!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>