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

来源：互联网发布：淘宝店家投诉编辑：程序博客网时间：2024/04/28 13:09
当前位置需另行后台传入
<!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>
0 0