这是后台给我的gejson:

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[[31.148260581906463,121.67195994909487],[31.086599467631498,121.76969558858048]],[[31.19918663281803,121.60168550904932],[31.270543099071627,121.73454489397504]],[[31.119065864225043,121.58791448558134],[31.19918663281803,121.60168550904932]],[[31.19918663281803,121.60168550904932],[31.148260581906463,121.67195994909487]],[[31.086599467631498,121.76969558858048],[31.270543099071627,121.73454489397504]],[[31.119065864225043,121.58791448558134],[31.086599467631498,121.76969558858048]],[[31.086599467631498,121.76969558858048],[31.04759406186183,121.59196584343134]],[[31.270543099071627,121.73454489397504],[31.148260581906463,121.67195994909487]],[[31.04759406186183,121.59196584343134],[31.119065864225043,121.58791448558134]],[[31.148260581906463,121.67195994909487],[31.119065864225043,121.58791448558134]]]}},{"type":"Feature","properties":{},"geometry":{"type":"MultiPoint","coordinates":[[31.19918663281803,121.60168550904932],[31.270543099071627,121.73454489397504],[31.148260581906463,121.67195994909487],[31.119065864225043,121.58791448558134],[31.086599467631498,121.76969558858048],[31.04759406186183,121.59196584343134]]}}]}

html代码:

<baidu-map
class="allMap"
v-if="lookMap"
:center="map.center"
:zoom="map.zoom"
:scroll-wheel-zoom="true">
<bm-marker
v-for="(item, index) in pointList"
:key="index"
:position="{lng: item[1], lat: item[0]}">
</bm-marker>
<bm-polyline
v-for="(item, index) in lineList"
:key="index + '-' + index"
:path="item"
stroke-color="blue"
:stroke-opacity="0.5"
:stroke-weight="2"></bm-polyline>
</baidu-map>

  

这是对js的处理(其中lineList数组为我存放polyline,pointList数组为我存放的marker的点)

this.lineList = []
this.pointList = []
let jsonArr = []
try {
jsonArr = JSON.parse(row.scPhotoJson).features
this.lookMap = true
for (let i = 0; i < jsonArr.length; i++) {
const type = jsonArr[i].geometry.type
switch (type) {
case 'LineString':
let arr = []
for (let j = 0; j < jsonArr[i].geometry.coordinates.length; j++) {
const item = jsonArr[i].geometry.coordinates[j]
let obj1 = {
lng: item[0][1],
lat: item[0][0]
}
let obj2 = {
lng: item[1][1],
lat: item[1][0]
}
let obj3 = [obj1, obj2]
arr.push(obj3)
}
this.lineList = arr
break
case 'MultiPoint':
this.pointList = jsonArr[i].geometry.coordinates
break
}
}
this.map.center = {
lng: this.pointList[0][1],
lat: this.pointList[0][0]
}
} catch (e) {
jsonArr = []
this.$message.error('json格式有误!')
}

 其中仅仅只是做了marker和polyline, 其他的可以按照此法进行解析.

根据后台提供的geojson可以得到如图所示:

其中遇到的问题有:

因为我的地图为弹框,所以当我的弹框显示的时候,只出现点绘制,但是线(方形)并没有绘制出来,当你再次拖拽地图时又会重新绘制为一个正确的图形,并且开始的点似乎还和经纬度对应不上.

这是错误的图:

点都已经发生了偏移

这是正确的图:

解决方法:

当我弹框显示的时候,我再次加载一下地图即可(在vue中可以使用v-if),因为v-if可以重新创建dom,完成重载!

写的比较粗略,大佬勿喷!

最新文章

  1. iOS持续写文件到本地
  2. MyEclipse、Eclipse复制web项目
  3. 第16/24周 SQL Server 2014中的基数计算
  4. Codeforces Gym 100231G Voracious Steve 记忆化搜索
  5. jquery生成二维码
  6. CT 来值班,让您安心过新年!
  7. Servlet与JSP的关系
  8. [整理]DLL延时加载 &amp;&amp; 设置进程私有环境变量
  9. 柯南君:看大数据时代下的IT架构(5)消息队列之RabbitMQ--案例(Work Queues起航)
  10. Cocos2d-x使用android拍照功能加载照片内存过大,通过另存照片尺寸大小解决
  11. 【fail2ban】使用fail2ban进行攻击防范
  12. 整理的linux面试运维题
  13. 7、Kafka、AMQ、RabbitMQ对比
  14. vue里面的v-model的变量不要使用下划线
  15. spring整合mybatisXML版
  16. go语言,golang学习笔记4 用beego跑一个web应用
  17. TCP 的那些事儿(上)(转)
  18. dd 命令的使用
  19. Java连接postgreSQL数据库,找不到表。
  20. Docker实践(二):容器的管理(创建、查看、启动、终止、删除)

热门文章

  1. hdu 5744 Keep On Movin (2016多校第二场)
  2. 浅谈Transformer 及Attention网络
  3. Pytorch使用GPU
  4. html5在微信中不允许放大缩小页面
  5. Date和Calendar
  6. VisualStudio 使用多个环境进行调试
  7. 关于移动端弹层下的body滚动
  8. P1076 单词覆盖还原
  9. P1027 三角形的周长
  10. P1022 绵羊排序