百度地图一套JS API，非常实用
import mapStyleJson from "./mapStyleJson"; import $ from "jquery"; class BaiduMapGl { constructor(el, centerPoint, zoom) { this.el = el; this.centerPoint = centerPoint; this.zoom = zoom; this.init(); this.sq = []; this.sh = []; this.dz = []; this.gb = []; this.jk = []; } // 初始化地图 init() { this.map = new BMapGL.Map(this.el, { minZoom: 12, }); this.setCenter(this.centerPoint, 12); this.map.enableScrollWheelZoom(true); this.map.setTilt(60); this.map.setMapStyleV2({ styleJson: mapStyleJson, }); return this; } // 设置地图中心点 setCenter(centerPoint, zoom) { this.map.centerAndZoom( new BMapGL.Point(centerPoint.lng, centerPoint.lat), zoom ); } // 设置地图中心 setCenterPoint(lng, lat) { this.centerPoint = { lng, lat, }; } // 绘制边界 drawPrismOverlay(data) { let list = data.map((item) => { return new BMapGL.Point(Number(item.lng), Number(item.lat)); }); let prism = new BMapGL.Prism(list, 200, { topFillColor: "#00B0F0", topFillOpacity: 0.3, sideFillColor: "#1B9995", sideFillOpacity: 1, }); // strokeColor: '#1B9995', // strokeWeight: 1, // strokeOpacity: 0.5, // fillColor:this.colorArr[idx], this.map.addOverlay(prism); return this; } // 绘制边界 // drawPrismOverlay(data, border, borderOpacity, color, opacity, borderStyle) { // let list = data.map((item) => { // return new BMapGL.Point(Number(item.lng), Number(item.lat)) // }) // let polygon = new BMapGL.Polygon(list, { // strokeColor: border || "#9200ff",//边线颜色 // strokeOpacity: borderOpacity || 0.5, // fillColor: color || "#95d3dd",//填充颜色 // fillOpacity: opacity || 0.5, // strokeStyle: borderStyle || "dashed", // strokeWeight: 2 // }) // this.map.addOverlay(polygon) // return this // } // 批量绘制markers batchMarkers(list, type) { list.forEach((item) => { this.drawMarker(item, type); }); return this; } // 单点绘制 带label drawMarker({ title, point, icon, size, offset, callback }, type) { if (type === "default") { // 点 let pt = new BMapGL.Point(point.lng, point.lat); // icon let ic = new BMapGL.Icon(icon, new BMapGL.Size(size.width, size.height)); // 创建标注 let marker = new BMapGL.Marker(pt, { icon: ic, }); // 标注点击事件 marker.addEventListener("click", function() { callback(); }); this.map.addOverlay(marker); // label let label = new BMapGL.Label(title, { position: pt, // 指定文本标注所在的地理位置 offset: new BMapGL.Size(offset.x, offset.y), //设置文本偏移量 }); // label样式 label.setStyle({ color: "#fff", fontSize: "12px", height: "20px", lineHeight: "20px", fontFamily: "微软雅黑", background: "transparent", border: "none", }); this.map.addOverlay(label); } else if (type === "sq") { // 点 let pt = new BMapGL.Point(point.lng, point.lat); // icon let ic = new BMapGL.Icon(icon, new BMapGL.Size(size.width, size.height)); // label // 创建标注 let marker = new BMapGL.Marker(pt, { icon: ic, }); this.map.addOverlay(marker); // 标注点击事件 marker.addEventListener("click", function() { callback(); }); marker.addEventListener("mouseover", function() { // 为标注设置标签 let label = new BMapGL.Label(title, { position: pt, // 指定文本标注所在的地理位置 offset: new BMapGL.Size(offset.x, offset.y), //设置文本偏移量 }); // label样式 label.setStyle({ color: "#fff", fontSize: "12px", height: "20px", lineHeight: "20px", fontFamily: "微软雅黑", background: "transparent", border: "none", }); marker.setLabel(label); }); marker.addEventListener("mouseout", function() { var label = this.getLabel(); //设置标签内容为空 label.setContent(""); label.setStyle({ display: "none" }); }); this.sq.push(marker); // console.log(this.sq); } else if (type === "dz") { // 点 let pt = new BMapGL.Point(point.lng, point.lat); // icon let ic = new BMapGL.Icon(icon, new BMapGL.Size(size.width, size.height)); // label // 创建标注 let marker = new BMapGL.Marker(pt, { icon: ic, }); this.map.addOverlay(marker); let label = new BMapGL.Label(title, { position: pt, // 指定文本标注所在的地理位置 offset: new BMapGL.Size(offset.x, offset.y), //设置文本偏移量 }); // 标注点击事件 marker.addEventListener("click", function() { callback(); }); marker.addEventListener("mouseover", function() { // 为标注设置标签 let label = new BMapGL.Label(title, { position: pt, // 指定文本标注所在的地理位置 offset: new BMapGL.Size(offset.x, offset.y), //设置文本偏移量 }); // label样式 label.setStyle({ color: "#fff", fontSize: "12px", height: "20px", lineHeight: "20px", fontFamily: "微软雅黑", background: "transparent", border: "none", }); marker.setLabel(label); }); marker.addEventListener("mouseout", function() { var label = this.getLabel(); //设置标签内容为空 label.setContent(""); label.setStyle({ display: "none" }); }); this.dz.push(marker); } else if (type === "gb") { // 点 let pt = new BMapGL.Point(point.lng, point.lat); // icon let ic = new BMapGL.Icon(icon, new BMapGL.Size(size.width, size.height)); // label // 创建标注 let marker = new BMapGL.Marker(pt, { icon: ic, }); this.map.addOverlay(marker); // 标注点击事件 marker.addEventListener("click", function() { callback(); }); marker.addEventListener("mouseover", function() { // 为标注设置标签 let label = new BMapGL.Label(title, { position: pt, // 指定文本标注所在的地理位置 offset: new BMapGL.Size(offset.x, offset.y), //设置文本偏移量 }); // label样式 label.setStyle({ color: "#fff", fontSize: "12px", height: "20px", lineHeight: "20px", fontFamily: "微软雅黑", background: "transparent", border: "none", }); marker.setLabel(label); }); marker.addEventListener("mouseout", function() { var label = this.getLabel(); //设置标签内容为空 label.setContent(""); label.setStyle({ display: "none" }); }); this.gb.push(marker); } else if (type === "jk") { // 点 let pt = new BMapGL.Point(point.lng, point.lat); // icon let ic = new BMapGL.Icon(icon, new BMapGL.Size(size.width, size.height)); // label // 创建标注 let marker = new BMapGL.Marker(pt, { icon: ic, }); this.map.addOverlay(marker); // 标注点击事件 marker.addEventListener("click", function() { callback(); }); marker.addEventListener("mouseover", function() { // 为标注设置标签 let label = new BMapGL.Label(title, { position: pt, // 指定文本标注所在的地理位置 offset: new BMapGL.Size(offset.x, offset.y), //设置文本偏移量 }); // label样式 label.setStyle({ color: "#fff", fontSize: "12px", height: "20px", lineHeight: "20px", fontFamily: "微软雅黑", background: "transparent", border: "none", }); marker.setLabel(label); }); marker.addEventListener("mouseout", function() { var label = this.getLabel(); //设置标签内容为空 label.setContent(""); label.setStyle({ display: "none" }); }); this.jk.push(marker); } } // 地图旋转动画 enableAnimation() { const keyFrames = [ { center: new BMapGL.Point(this.centerPoint.lng, this.centerPoint.lat), zoom: 12, tilt: 60, heading: 0, percentage: 0, }, { center: new BMapGL.Point(this.centerPoint.lng, this.centerPoint.lat), zoom: this.zoom, tilt: 50, heading: 360, percentage: 1, }, ]; const opts = { duration: 1000, // 设置每次迭代动画持续时间 delay: 3000, // 设置动画延迟开始时间 interation: 1, // 设置动画迭代次数 }; const animation = new BMapGL.ViewAnimation(keyFrames, opts); // 初始化动画实例 this.map.startViewAnimation(animation); return this; } // 清除所有markers及labels clearAllMarkers() { // 获取所有覆盖物 let length = this.map.getOverlays().length; for (let i = length; i > 0; i--) { let marker = this.map.getOverlays()[i - 1]; // 去除marker及label if (marker.toString() == "Marker" || marker.toString() == "Label") { this.map.removeOverlay(marker); } } } // 清除所有覆盖物 clearOverlays() { this.map.clearOverlays(); } // 获取小区uid getLocalUid(XQ) { const local = new BMapGL.LocalSearch(this.map, { renderOptions: { map: this.map }, }); local.setMarkersSetCallback((pois) => { console.log(pois); pois.map((v) => { this.map.removeOverlay(v.marker); }); const uid = pois[0].uid; this.drowBoundary(uid); }); local.search(XQ); } //小区边界 drowBoundary(uid) { $.ajax({ async: false, url: "http://map.baidu.com/?pcevaname=pc4.1&qt=ext&ext_ver=new&l=12&uid=" + uid, dataType: "jsonp", jsonp: "callback", success: (result) => { console.log(result); const content = result.content; if (content.geo != null && content.geo != undefined) { const geo = content.geo; let points = this.coordinateToPoints(geo); //point分组，得到多边形的每一个点，画多边形 if (points && points.indexOf(";") >= 0) { points = points.split(";"); } var arr = []; for (let i = 0; i < points.length - 1; i++) { var temp = points[i].split(","); arr.push( new BMapGL.Point(parseFloat(temp[0]), parseFloat(temp[1])) ); } //创建多边形 let polygon = new BMapGL.Prism(arr, 50, { topFillColor: "#00B0F0", topFillOpacity: 0.3, sideFillColor: "#1B9995", sideFillOpacity: 0.8, }); this.map.addOverlay(polygon); //增加多边形 this.map.setViewport(polygon.getPath()); } else { console.log("暂无小区边界信息"); } }, }); } //百度米制坐标转换为经纬度 coordinateToPoints(coordinate) { let points = ""; if (coordinate) { const projection = BMAP_NORMAL_MAP.getProjection(); if (coordinate && coordinate.indexOf("-") >= 0) { coordinate = coordinate.split("-"); } //取点集合 let tempco = coordinate[1]; if (tempco && tempco.indexOf(",") >= 0) { tempco = tempco.replace(";", "").split(","); } //分割点，两个一组，组成百度米制坐标 let temppoints = []; for (let i = 0, len = tempco.length; i < len; i++) { temppoints.push({ lng: tempco[i], lat: tempco[i + 1], }); i++; } for (let i = 0, len = temppoints.length; i < len; i++) { let pos = temppoints[i]; let point = projection.pointToLngLat( new BMapGL.Pixel(pos.lng, pos.lat) ); points += [point.lng, point.lat].toString() + ";"; } } return points; } } export default BaiduMapGl;