vue利用百度地图api画路线&打点&滑入展示(坐标)

1.创建地图容器

<div id="allmap" style=" border-radius: 5px;" ></div>

2.展示百度地图

guiji() {
      var map = new BMap.Map('allmap')
      var point = new BMap.Point(132.1321213213,382651646846) //随便写的坐标
 }

3.画出路线(注意看注释)

guiji() {
      var map = new BMap.Map('allmap')
      var point = new BMap.Point(132.1321213213,382651646846) //随便写的坐标
      this.points.map(v => {   //points是对象(含经纬度)
        var pt = new BMap.Point(v.siteLongitude,v.siteLatitude)
        pois.push(pt)
      })
      var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
          scale: 0.6,//图标缩放大小
          strokeColor:'#fff',//设置矢量图标的线填充颜色
          strokeWeight: '2',//设置线宽
      }); //路线样式!!!!!!!!!!!!!!!!!!!!!!!!!!
      var icons = new BMap.IconSequence(sy, '10%', '10%',false);
      
      let num = 0;
      for(let i = 0; i < pois.length; i++){
        if(pois[0].lat == pois[i].lat && pois[0].lng == pois[i].lng) num++
      } //此处FOR循环,本人觉得必须要,百度地图路线不允许所有坐标都一样
      if(num!=pois.length){
        var polyline = new BMap.Polyline(pois, {
          enableEditing: false, // 是否启用线编辑,默认为false
          enableClicking: false, // 是否响应点击事件,默认为true
          icons: [icons],
          strokeWeight: 8, // 折线的宽度,以像素为单位
          strokeOpacity: 1, // 折线的透明度,取值范围0 - 1
          strokeColor: '#4C7FED' // 折线颜色
        })
        map.addOverlay(polyline)
      }
      
 }

4.打点&滑入展示(注释很重要)

guiji() {
      var map = new BMap.Map('allmap')
      var point = new BMap.Point(132.1321213213,382651646846) //随便写的坐标
      this.points.map(v => {   //points是对象(含经纬度)
        var pt = new BMap.Point(v.siteLongitude,v.siteLatitude)
        pois.push(pt)
      })
      var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
          scale: 0.6,//图标缩放大小
          strokeColor:'#fff',//设置矢量图标的线填充颜色
          strokeWeight: '2',//设置线宽
      }); //路线样式!!!!!!!!!!!!!!!!!!!!!!!!!!
      var icons = new BMap.IconSequence(sy, '10%', '10%',false);
      
      let num = 0;
      for(let i = 0; i < pois.length; i++){
        if(pois[0].lat == pois[i].lat && pois[0].lng == pois[i].lng) num++
      } //此处FOR循环,本人觉得必须要,百度地图路线不允许所有坐标都一样
      if(num!=pois.length){
        var polyline = new BMap.Polyline(pois, {
          enableEditing: false, // 是否启用线编辑,默认为false
          enableClicking: false, // 是否响应点击事件,默认为true
          icons: [icons],
          strokeWeight: 8, // 折线的宽度,以像素为单位
          strokeOpacity: 1, // 折线的透明度,取值范围0 - 1
          strokeColor: '#4C7FED' // 折线颜色
        })
        map.addOverlay(polyline)
      }

	//下方为打点代码
      var nowIcon = new BMap.Icon(
        require("../../../assets/image/轨迹2.png"),
        new BMap.Size(47, 47),
        {
          anchor: new BMap.Size(22, 40),
          imageOffset: new BMap.Size(0, 0)
        }
      );//打点图标样式
      for (let i = 0; i < pois.length; i++) {  //本人序号为1.2.3.4.....,根据需求更改
          var label = new BMap.Label(i+1, {offset:new BMap.Size(-3,-5)})
          label.setStyle({
            background:'url()',
            color:'#fff',
            border:'none',
            fontSize:'24px',
            textAlign:'center',
            width:'50px',
            height:'50px',
            lineHeight:'50px',
          })
          var nowMarker = new BMap.Marker(pois[i], {
            icon: nowIcon,
          });
          nowMarker.setLabel(label)  //将序号放入标记中
          map.addOverlay(nowMarker);
          nowMarker.setZIndex(9999) //在路线之上 覆盖路线
          
          //下方的Name为所需展示名字,可以是个变量,根据需求展示
          nowMarker.addEventListener('mouseover', function(e) {
            let opts={}
            var infoWindow = new BMap.InfoWindow(`${Name}`, opts) // 创建信息窗口对象
            map.openInfoWindow(infoWindow,pois[i])   
          })
          nowMarker.addEventListener('mouseout', function(e) {
           map.closeInfoWindow();
          })
        } 
 }

5.调用

this.guiji() //在合适地方调用

6.效果图在这里插入图片描述

  • 1
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值