https://carlinollc.com/static/home/js/baidumap.js%3Fv=1786711318

1
2
3
4function baiduMap(markerArr,bMap){
5    //标注点数组
6    this.markerArr = markerArr;
7   markerArr = [{title:"我的标记",content:"我的备注",point:"114.033159|22.538665",isOpen:1,icon:{w:22,h:22,l:0,t:22,x:6,lb:5}}];
8  
9    //创建和初始化地图函数：
10    function initMap(){
11        createMap();//创建地图
12        setMapEvent();//设置地图事件
13        addMapControl();//向地图添加控件
14        addMarker();//向地图中添加marker
15    }
16    
17    //创建地图函数：
18    function createMap(){
19        var map = new BMap.Map(bMap);//在百度地图容器中创建一个地图
20        var json = this.markerArr[0];
21        var p0 = parseFloat(json.point.split("|")[0]);
22        var p1 = parseFloat(json.point.split("|")[1]);
23        var point = new BMap.Point(p0,p1);//定义一个中心点坐标
24        map.centerAndZoom(point,13);//设定地图的中心点和坐标并将地图显示在地图容器中
25        window.map = map;//将map变量存储在全局
26		//修改地图的样式
27		/*
28		 var style_map=[{
29                featureType: "poi",
30                elementType: "labels",
31                stylers: {
32                    visibility: "off"
33                }
34            }, {
35                featureType: "subway",
36                elementType: "all",
37                stylers: {
38                    visibility: "off"
39                }
40            }, {
41                featureType: "local",
42                elementType: "all",
43                stylers: {
44                    color: "#ffffff",
45                    weight: "0.3"
46                }
47            }, {
48                featureType: "green",
49                elementType: "all",
50                stylers: {
51                    color: "#e6e6e6"
52                }
53            }, {
54                featureType: "water",
55                elementType: "all",
56                stylers: {
57                    color: "#ededed"
58                }
59            }, {
60                featureType: "land",
61                elementType: "all",
62                stylers: {
63                    color: "#f7f7f7"
64                }
65            }, {
66                featureType: "manmade",
67                elementType: "all",
68                stylers: {
69                    color: "#f7f7f7",
70                    visibility: "off"
71                }
72            }, {
73                featureType: "building",
74                elementType: "all",
75                stylers: {
76                    color: "#f2f2f2"
77                }
78            }, {
79                featureType: "highway",
80                elementType: "geometry",
81                stylers: {
82                    color: "#ffffff",
83                    weight: "0.5"
84                }
85            }, {
86                featureType: "arterial",
87                elementType: "all",
88                stylers: {
89                    color: "#ffffff",
90                    weight: "0.3"
91                }
92            }, {
93                featureType: "railway",
94                elementType: "all",
95                stylers: {
96                    visibility: "off"
97                }
98            }, {
99                featureType: "highway",
100                elementType: "labels.text.fill",
101                stylers: {
102                    color: "#9f9f9f"
103                }
104            }, {
105                featureType: "arterial",
106                elementType: "labels.text.fill",
107                stylers: {
108                    color: "#b4b4b4",
109                    weight: "0.1"
110                }
111            }, {
112                featureType: "label",
113                elementType: "labels.text.fill",
114                stylers: {
115                    color: "#666666"
116                }
117            }, {
118                featureType: "administrative",
119                elementType: "all",
120                stylers: {}
121            }, {
122                featureType: "local",
123                elementType: "labels.text.fill",
124                stylers: {
125                    color: "#dfdfdf"
126                }
127            }, {
128                featureType: "highway",
129                elementType: "labels.text.stroke",
130                stylers: {
131                    color: "#ffffff"
132                }
133            }, {
134                featureType: "highway",
135                elementType: "labels.icon",
136                stylers: {
137                    visibility: "off"
138                }
139            }, {
140                featureType: "label",
141                elementType: "labels.text.stroke",
142                stylers: {
143                    color: "#ffffff"
144                }
145            }, {
146                featureType: "boundary",
147                elementType: "all",
148                stylers: {}
149            }]
150          //将样式加载到地图中
151          map.setMapStyle({styleJson:eval("style_map")});
152        */
153    }
154    
155    //地图事件设置函数：
156    function setMapEvent(){
157        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
158        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
159        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
160        map.enableKeyboard();//启用键盘上下左右键移动地图
161    }
162    
163    //地图控件添加函数：
164    function addMapControl(){
165        //向地图中添加缩放控件
166        //var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
167       //   map.addControl(ctrl_nav);
168            //向地图中添加缩略图控件
169        //var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
170        //map.addControl(ctrl_ove);
171            //向地图中添加比例尺控件
172        //var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
173        //map.addControl(ctrl_sca);
174    }
175    
176    
177    //创建marker
178    function addMarker(){
179        for(var i=0;i<this.markerArr.length;i++){
180            var json = this.markerArr[i];
181			console.log('json')
182			console.log(json)
183            var p0 = Number(json.point.split("|")[0]);
184            var p1 = parseFloat(json.point.split("|")[1]);
185			
186            var point = new BMap.Point(p0,p1);
187			console.log(p0)
188            var iconImg = createIcon(json.icon);
189            var marker = new BMap.Marker(point,{icon:iconImg});
190
191            var iw = createInfoWindow(i);
192			
193			
194            var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-1000)});
195            marker.setLabel(label);
196            //设置marker点跳动
197           // marker.setAnimation(BMAP_ANIMATION_BOUNCE);
198            map.addOverlay(marker);
199       
200          
201            (function(){
202                var index = i;
203                var _iw = createInfoWindow(i);
204                var _marker = marker;
205              //  var _search=searchInfoWindow();
206                _marker.addEventListener("click",function(){
207                  this.openInfoWindow(_iw);
208                   // _search.open(_marker);
209                });
210                _iw.addEventListener("open",function(){
211                    _marker.getLabel().hide();
212                })
213                _iw.addEventListener("close",function(){
214                    _marker.getLabel().show();
215                })
216                label.addEventListener("click",function(){
217                    _marker.openInfoWindow(_iw);
218                })
219                if(!!json.isOpen){
220                    label.hide();
221                   _marker.openInfoWindow(_iw);
222                    //添加检索功能框
223                  // _search.open(_marker);
224                }
225            })()
226			
227        }
228    }
229    //创建InfoWindow
230   function createInfoWindow(i){
231        var json = this.markerArr[i];
232		console.log(json)
233       // var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
234		
235		  var infoWindow = new BMap.InfoWindow("<div class='BMap_bubble_content'><div class='close' onclick='closeWindow();'><img src='https://api.map.baidu.com/images/iw_close1d3.gif'></div><div class='iw_poi_title' title='" + json.title + "'>" + json.title + "</div><div class='iw_poi_content'>"+json.content+"</div></div>",{  
236                   // title: json.title, //标题                                        
237                    enableAutoPan : true, //自动平移  
238                  
239                    width: 320, //宽度    
240                    height: 150, //高度
241                    enableMessage:true});  // 创建信息窗口对象  
242			var lng = 	parseFloat(json.point.split("|")[0])
243      
244			var lat = 	parseFloat(json.point.split("|")[1])
245          map.openInfoWindow(infoWindow, new BMap.Point(lng, lat));  
246		  
247		  
248      //map.closeInfoWindow()
249		
250        return infoWindow;
251    }
252    //创建一个Icon
253    function createIcon(json){
254        //自定义图标
255        //{w:23,h:25,l:46,t:21,x:9,lb:12}
256       
257        var icon = new BMap.Icon(IMG+"/map_marker.png", 
258            new BMap.Size(100,100),{imageOffset: new BMap.Size(40,12),infoWindowOffset:new BMap.Size(17,1),offset:new BMap.Size(9,40)});
259       //var icon = new BMap.Icon("http://api.map.baidu.com/lbsapi/creatmap/images/us_cursor.gif", 
260       //new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
261        return icon;
262    }
263   //
264
265
266    //创建searchinfo
267    function searchInfoWindow(){
268        var searchInfoWindow = null;
269        var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
270                '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
271                '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
272              '</div>';
273
274        searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
275            title  : "百度大厦",      //标题
276            width  : 290,             //宽度
277            height : 105,              //高度
278            panel  : "panel",         //检索结果面板
279            enableAutoPan : true,     //自动平移
280            searchTypes   :[
281                BMAPLIB_TAB_SEARCH,   //周边检索
282                BMAPLIB_TAB_TO_HERE,  //到这里去
283                BMAPLIB_TAB_FROM_HERE //从这里出发
284            ]
285        });
286        return searchInfoWindow;
287    }
288    
289    initMap();//创建和初始化地图
290}
291
292   function closeWindow(){
293   map.closeInfoWindow();
294   
295   }