【百度商圈】百度商圈功能

先看一下效果：
蓝色边框浅白底的，就是商圈，右上角是用来制作商圈的工具，当然，你也可以不使用工具，在页面初始化时显示商圈

是否添加商圈关闭后：

<!-- 地图控件 -->
<div class="as-scheduling-toolbar"><el-form><el-form-item label="是否添加商圈："><el-switch v-model="delivery"  @change="addBlock">添加区域</el-switch></el-form-item></el-form>
</div>
<!-- 左侧筛选条件 -->
<div class="point-left collapse" v-show="chooseMap"><el-tabs type="border-card" style="height: 100%;"><el-tab-pane label="筛选条件" style="min-height:500px;"><el-form :inline="true" :model="queryform" ref="searchForm" class="demo-form-inline"><el-form-item><el-autocompletepopper-class="my-autocomplete"v-model="queryform.areaName":fetch-suggestions="querySearch"placeholder="请输入商圈名称"@select="handleSelect"><template slot-scope="{ item }"><div class="name">{{ item.tradeName }}</div><span style="color: #999; font-size:12px; line-height:25px;position: relative; top: -12px;">{{ item.tradeContent }}</span></template></el-autocomplete></el-form-item></el-form></el-tab-pane><el-tab-pane label="点位列表" style="min-height:500px;">点位列表</el-tab-pane></el-tabs>
</div>
<!-- 左侧筛选按钮 -->
<div :class="['circuit', !chooseMap? 'circuit1':'']" @click="chooseMap = !chooseMap"></div>

初始化显示商圈：

methods: {createMap () {this.map = new BMap.Map('container') // 设置普通街道为底图this.map.addControl(new BMap.ScaleControl()) // 添加比例尺控件 116.226959, lat: 39.940952}this.map.centerAndZoom(new BMap.Point(116.325218, 39.977441), 12) // 初始化地图,设置中心点坐标和地图级别。this.map.addControl(new BMap.NavigationControl()) // 添加鱼骨控件this.map.setCurrentCity('北京') // 设置3D地图显示的城市 此项是必须设置的var local = new BMap.LocalSearch(this.map, {renderOptions: { map: this.map }})local.search('餐饮')this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放this.addTrading() // 添加初始化商圈},addTrading () {// 创建二环// 创建经纬度数组var secRingCenter = new BMap.Point(116.400244, 39.931757)var secRing = [new BMap.Point(116.362875, 39.949459), new BMap.Point(116.378972, 39.956539), new BMap.Point(116.438764, 39.955654), new BMap.Point(116.440488, 39.911836), new BMap.Point(116.365175, 39.905637)]// 创建多边形var secRingPolygon = new BMap.Polygon(secRing, { strokeColor: '#3cb0d0', strokeWeight: 3, strokeOpacity: 0.5 })// 添加多边形到地图上this.map.addOverlay(secRingPolygon)secRingPolygon.addEventListener('click', (e) => {if (this.delivery) {this.tradeForm.name = e.target.tradeName || ''this.tradeForm.content = e.target.tradeContent || ''this.currentLay = e.targetthis.tradeVisable = true}})secRingPolygon.addEventListener('mouseover', (e) => {this.tradeName = e.target.tradeName || ''this.tradeContent = e.target.tradeContent || ''if (this.tradeName !== '') { this.tradeLabel = true }})secRingPolygon.tradeName = this.tradeNamesecRingPolygon.tradeContent = this.tradeContentsecRingPolygon.addEventListener('mouseout', () => {this.tradeLabel = false})overlays.push(secRingPolygon)},
},

使用工具自定义商圈

// 添加区域addBlock (val) {if (!val) {// 隐藏document.getElementsByClassName('BMapLib_Drawing')[0].style.display = 'none'let docs = document.getElementsByClassName('BMap_contextMenu')for (let i = 0; i < docs.length; i++) {docs[i].style.display = 'none'}document.getElementsByClassName('BMapLib_box')[0].click()console.log(document.getElementsByClassName('BMapLib_box')[0])return} else if (this.drawingManager !== undefined) {// 显示document.getElementsByClassName('BMapLib_Drawing')[0].style.display = 'block'let docs = document.getElementsByClassName('BMap_contextMenu')for (let i = 0; i < docs.length; i++) {docs[i].style.display = 'block'}return}this.editTrade()let that = this// 商圈添加事件let overlaycomplete = function (e) {e.overlay.addEventListener('click', () => {if (that.delivery) { // 编辑商圈功能是否打开that.tradeForm.name = e.overlay.tradeName || ''that.tradeForm.content = e.overlay.tradeContent || ''that.currentLay = e.overlaythat.tradeVisable = true}})e.overlay.addEventListener('mouseover', () => {that.tradeName = e.overlay.tradeName || ''that.tradeContent = e.overlay.tradeContent || ''if (that.tradeName !== '') { that.tradeLabel = true }})e.overlay.addEventListener('mouseout', () => {that.tradeLabel = false})overlays.push(e.overlay)console.log(overlays)if (that.delivery) { // 编辑商圈功能是否打开that.tradeForm.name = e.overlay.tradeName || ''that.tradeForm.content = e.overlay.tradeContent || ''that.currentLay = e.overlaythat.tradeVisable = true}switch (e.drawingMode) {case 'polygon': // 编辑多边形case 'circle':that.onPolygon(e) // 右键菜单breakcase 'marker':that.onMarker(e)break}}var styleOptions = { // 鼠标绘制区域样式strokeColor: '#3cb0d0', // 边线颜色。fillColor: '#fff', // 填充颜色。当参数为空时，圆形将没有填充效果。strokeWeight: 3, // 边线的宽度，以像素为单位。strokeOpacity: 0.5, // 边线透明度，取值范围0 - 1。fillOpacity: 0.4, // 填充的透明度，取值范围0 - 1。strokeStyle: 'solid' // 边线的样式，solid或dashed。}// 实例化鼠标绘制工具this.drawingManager = new BMapLib.DrawingManager(this.map, {isOpen: false, // 是否开启绘制模式enableDrawingTool: true, // 是否显示工具栏drawingToolOptions: {anchor: BMAP_ANCHOR_TOP_RIGHT, // 位置offset: new BMap.Size(5, 5), // 偏离值drawingModes: [BMAP_DRAWING_MARKER,BMAP_DRAWING_CIRCLE,BMAP_DRAWING_POLYGON,BMAP_DRAWING_RECTANGLE] // 绘制模式  多边形},circleOptions: styleOptions, // 圆的样式// polylineOptions: styleOptions, // 线的样式polygonOptions: styleOptions, // 多边形的样式rectangleOptions: styleOptions // 矩形的样式})// 添加鼠标绘制工具监听事件，用于获取绘制结果this.drawingManager.addEventListener('overlaycomplete', overlaycomplete)},// 多边形右键事件onPolygon (e, edit) {let squle = '多边形'if (e.drawingMode === 'circle') {squle = '圆形'}let that = thisvar polygon = e.overlay || e/* -----------------多边形右键删除以及编辑多边形------------------------- */var polygonMenu = new BMap.ContextMenu()var txtMenuItem = [{text: '删除' + squle,callback: function () {that.map.removeOverlay(polygon)overlays.splice(overlays.findIndex((value) => value === polygon), 1) // 数组里删除多边形覆盖物对应的经纬度}}, {text: '编辑' + squle,callback: function () {polygon.enableEditing()}}, {text: '取消编辑' + squle,callback: function () {polygon.disableEditing()}}]for (var i = 0; i < txtMenuItem.length; i++) {polygonMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100))}polygon.addContextMenu(polygonMenu)console.log(overlays)},// 点位右击事件onMarker (e, edit) {let that = thiscoverlays.push(e.overlay)var marker = e.overlay/* -----------------标注右键删除-------------------- */var markerMenu = new BMap.ContextMenu()markerMenu.addItem(new BMap.MenuItem('删除标注 ', function () {that.map.removeOverlay(marker)var path = e.overlay.getPosition()var coverPlan = '' // 获取点的经纬度var coverPlanA = '' // 获取所有点的经纬度coverPlan = 'lng:' + path.lng + '\n lat:' + path.latcoverPlanA += coverPlancoverPlanA.replace(coverPlan)coverlays.splice(coverlays.findIndex((val) => val === marker), 1) // 数组里删除点覆盖物对应的经纬度// console.log(coverlays);}))marker.addContextMenu(markerMenu)marker.addEventListener('click', function (e) {that.tradeVisable = truevar label = new BMap.Label('宝马一号', {offset: new BMap.Size(20, -10)})// 改变marker右边文字以及边框的样式label.setStyle(markerStyle)marker.setLabel(label)})},

【百度商圈】百度商圈功能相关推荐

百度APP尝试电商新业务“百度返现”
最近松松编辑杰哥发现,百度在电商业务开始有新动作了,联手京东和苏宁易购,在百度app购物板块重磅上线百度搜索购物返现活动,看来这哥三凑到一起是要搞大动作了! 根据杰哥了解,百度玩的这波返现活动其实跟电 ...
百度又做电商；ofo 退出日本；Kotlin 1.3 正式发布 | 极客头条
「CSDN 极客头条」,是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报道.风里雨里,我们将每天为朋友们,播报最新鲜有料的新闻资讯,让所有技术人,时刻紧跟业界潮流. 快讯速知百 ...
猿圈题库_百度传课携手猿圈接入题库及测评服务
[IT168 资讯]近日,百度传课与猿圈科技签署战略合作协议,之后,百度传课将接入猿圈科技自主研发的IT类题库和测评技术,以更好的帮助百度传课的用户鉴别和提升学习效果,为用户打造"教-学-练 ...
电商只是百度收购YY目标的冰山一角
2014年的六一儿童节,一个新发现让四川大凉山的王萌小朋友开心不已.在网上搜索"长颈鹿"时,他惊喜地发现,在百度百科词条下方多了一个实时直播按钮--点击这个按钮,竟然直接跳出了北京 ...
流量、入口优势凸显，百度成直播电商新蓝海
继5月披露直播业务战略方向后,百度继续加码直播带货.6月15日,百度APP首页上线618频道,主攻内容带货和直播带货. 驭风618,百度发力电商和直播带货 2020年,一场突如其来的疫情给人们的生活. ...
竞秀纷享“共享电商、共享商圈”模式
** 打破传统思维,拥抱共享电商.共享商圈.共享股东 --成功属于敢于创新的行业领导者** 什么是竞秀纷享"共享电商.共享商圈"模式时代在前进,盈利模式也需要不断创新推进,&qu ...
一文了解百度信息流：百度电商直播、百青藤、观星盘
百度目前是目前国内市占率最高的搜索引擎(百度App的月活跃用户数达到6.28亿),也因此百度信息流凭借特有的意图定向能力优势,结合百度系App+百青藤联盟的流量优势,其在2022年的上半年广告收入规模 ...
共享电商即共享商圈的背后：共创、共生、共享、共富，共赢的共富精神
共享电商(共享商圈)的背后,即:共创.共生.共享,共赢.共富的商业精神 1.共创,打造内部合伙人建设 a.创始人团队内部共创,让员工成为合伙人: b.企业之间的互助共创,资源整合,跨界融合: c.消费 ...
WGS84转换为三大图商（百度、高德、腾讯）坐标，Gcj02转换为WGS84
首先说一说关于坐标系,WGS84坐标系是1984世界大地坐标系(World Geodetic System)的简称. 它是美国国防制图局于1984年建立的,是GPS卫星星历的参考基准,也是协议地球参考 ...
深圳弘辽科技电商从百度一季度营收看移动互联网时代风口与布局
原标题<深圳弘辽科技电商从百度一季度营收看移动互联网时代风口与布局> 百度2020年第一季度百度营收225亿元,净利润(Non-GAAP)31亿元,同比增长219%.其中,以人工智能为核心 ...

【百度商圈】百度商圈功能

【百度商圈】百度商圈功能相关推荐

最新文章

热门文章