建设网站实训报告书,福田网站建设联系电话,开发软件的app,网站关键词密度查询需求#xff1a;根据后端返回的定位坐标数据实现定位渲染
1.效果图 2.准备工作,在main.js和index.js文件中添加以下内容
main.js
app.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ak: sRDDfAKpCSG5iF1rvwph4Q95M…需求根据后端返回的定位坐标数据实现定位渲染
1.效果图 2.准备工作,在main.js和index.js文件中添加以下内容
main.js
app.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ak: sRDDfAKpCSG5iF1rvwph4Q95M6tDCApL,// v:3.0, // 默认使用3.0// type: WebGL // ||API 默认API (使用此模式 BMapBMapGL)
});index.jsscript typetext/javascript srchttps://api.map.baidu.com/getscript?v3.0aksRDDfAKpCSG5iF1rvwph4Q95M6tDCApL/script
3.html
templatedivdiv idmain6stylewidth:650px;height:400px;/div /div
/template
4.script
script setup
import * as echarts from echarts;
import echarts/extension/bmap/bmap;
import {onMounted,defineProps} from vue;// import chinaMap from https://geo.datav.aliyun.com/areas_v3/bound/100000_full.jsonconst props defineProps([data])var initData JSON.parse(JSON.stringify(props)).dataconsole.log(initData,88888888888888888888888888888888266)const initMap () {var chartDom document.getElementById(main6);var myChart echarts.init(chartDom);var option;option {backgroundColor: rgba(0,0,0,.1),title: {text: 当前服务地区,left: center,textStyle: {color: #fff}},tooltip: {trigger: item},bmap: { //地理坐标系组件用于地图的绘制,支持在地图地理坐标系上绘制散点图线集center: [120.22221, 30.2084],zoom: 10,roam: true, //是否允许鼠标放大缩小mapStyle: { //地图显示的样式styleJson: [{featureType: water,elementType: all,stylers: {color: #044161}},{featureType: land,elementType: all,stylers: {color: #004981}},{featureType: boundary,elementType: geometry,stylers: {color: #064f85}},{featureType: railway,elementType: all,stylers: {visibility: off}},{featureType: highway,elementType: geometry,stylers: {color: #004981}},{featureType: highway,elementType: geometry.fill,stylers: {color: #005b96,lightness: 1}},{featureType: highway,elementType: labels,stylers: {visibility: off}},{featureType: arterial,elementType: geometry,stylers: {color: #004981}},{featureType: arterial,elementType: geometry.fill,stylers: {color: #00508b}},{featureType: poi,elementType: all,stylers: {visibility: off}},{featureType: green,elementType: all,stylers: {color: #056197,visibility: off}},{featureType: subway,elementType: all,stylers: {visibility: off}},{featureType: manmade,elementType: all,stylers: {visibility: off}},{featureType: local,elementType: all,stylers: {visibility: off}},{featureType: arterial,elementType: labels,stylers: {visibility: off}},{featureType: boundary,elementType: geometry.fill,stylers: {color: #029fd4}},{featureType: building,elementType: all,stylers: {color: #1a5787}},{featureType: label,elementType: all,stylers: {visibility: off}}]}},series: [{name: , type: effectScatter, //样式coordinateSystem: bmap, //该系列使用的坐标系data:[], // data的数据格式为[{name:海门,value:[121.15,31.89,200]}{name:海门111,value:[121.15,31.89,200]}...] encode: {value: 2},showEffectOn: render,rippleEffect: { //涟漪特效相关配置。brushType: stroke //波纹的绘制方式},symbolSize: 10, //标记的大小,可以设置数组或函数返回值的形式hoverAnimation: true, // 鼠标移入放大圆label: {formatter: {b},position: right,show: true},itemStyle: { //样式color: #f4e925,shadowBlur: 10,shadowColor: #333},emphasis: { //高亮状态下的多边形和标签样式scale: true},zlevel: 1}]};// 处理数据 将数据转换成echart可以识别的数据格式,例如[{name:海门,value:[121.15,31.89,200]}{name:海门111,value:[121.15,31.89,200]}...]详情请查echart地图坐标let result []initData.map((item,index) {let child {name: , value:[,]}child.name item.commNamechild.value[0] Number(item.mapX)child.value[1] Number(item.mapY)child.value[2] Number(item.mapY)result.push(child)})console.log(result,result)option.series[0].data result// myChart.registerMap(china, { geoJSON: chinaMap })option myChart.setOption(option);}onMounted(() {initMap()})
/script
