Vue 百度地图轨迹

 VUE   高蒙   阅读(179)   评论(0)   2019-07-31 10:24:43    轨迹 百度地图  


首先我们在我们的项目的根目录找到index.html 我们把百度地图的api引入进去这样全局都可以使用


1、methods 里面定义一个需要使用的方法:


initMap() {
            var map = new BMap.Map("allmap");    // 创建Map实例
          //  map.enableScrollWheelZoom(); 
            map.addControl(new BMap.ScaleControl());
           
            var datas = [
                {latitude: "31.228525", longitude: "121.512917"},
                {latitude: "31.228532", longitude: "121.512878"},
                {latitude: "31.228503", longitude: "121.5129"},
                {latitude: "31.224641", longitude: "121.510536"},
                {latitude: "31.228535", longitude: "121.512903"},
                {latitude: "31.228529", longitude: "121.512861"},
                {latitude: "31.228521", longitude: "121.512908"},
                {latitude: "31.228608", longitude: "121.513078"},
                {latitude: "31.228538", longitude: "121.512964"},
                {latitude: "31.226153", longitude: "121.513097"},
                {latitude: "31.228541", longitude: "121.512922"},
                {latitude: "31.228486", longitude: "121.512945"},
                {latitude: "31.226568", longitude: "121.512989"},
                {latitude: "31.228556", longitude: "121.513047"},
                {latitude: "31.226153", longitude: "121.513097"},
                {latitude: "31.226149", longitude: "121.513098"},
                {latitude: "31.221156", longitude: "121.51847"},
                {latitude: "31.228556", longitude: "121.513047"},
                {latitude: "31.2195", longitude: "121.516652"},
                {latitude: "31.226149", longitude: "121.513098"} 
                    
            ]
            var PointArr = [];
            if(datas.length != 0) {
                for(let is in datas) {
                    PointArr.push({lat:datas[is].latitude,lng:datas[is].longitude}) ;   
                }
                addStartMarker(new BMap.Point(PointArr[0].lng, PointArr[0].lat),'起点',map) ; 
                addMarkerEnd(new BMap.Point(PointArr[PointArr.length-1].lng, PointArr[PointArr.length-1].lat),'终点',map);    
            }else{
                PointArr.push({lat:39.9152108931,lng:116.4039006839}) ;        
                 //addStartMarker(new BMap.Point(PointArr[0].lng, PointArr[0].lat),'起点',map) ;
           }
         
            map.centerAndZoom(PointArr,13); //根据经纬度显示地图的范围
            map.setViewport(PointArr); //根据提供的地理区域或者坐标设置地图的视野
            
              // 百度地图API功能
            var MapIcon = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW,{
                scale: 0.6, //图标缩放大小
                strokeColor: '#ffffff', //设置矢量图标线填充颜色
                strokeWeight: '1' //设置线宽
            });
            
            var icons = new BMap.IconSequence(MapIcon,'10','30'); 
            var pois = [];
            var i = 0;
            for(let i in PointArr) {
                pois.push(new BMap.Point(PointArr[i].lng,PointArr[i].lat));
               
            }
            var polyline = new BMap.Polyline(pois, {
                        enableEditing: false,//是否启用线编辑,默认为false
                        enableClicking: true,//是否响应点击事件,默认为true
                        icons:[icons],
                        strokeWeight:'5',//折线的宽度,以像素为单位
                        strokeOpacity: 1,//折线的透明度,取值范围0 - 1
                        strokeColor:"#349c00" //折线颜色
                    });
                
            map.addOverlay(polyline);
            
            //添加起点图标 
            function addStartMarker(point, name,mapInit) {
                var  myIcon  =  new BMap.Icon("http://www.yantongai.com/play/up.png", new BMap.Size(45,45),{
                    anchor: new BMap.Size(20, 45),//这句表示图片相对于所加的点的位置mapStart
                    imageSize:new BMap.Size(45, 45) //图标所用的图片的大小,此功能的作用等同于CSS中的background-size属性。可用于实现高清屏的高清效果
                });
                 window.marker = new BMap.Marker(point,{icon:myIcon});  // 创建标注
                 mapInit.addOverlay(marker);
            } 
            //添加结束图标
            function addMarkerEnd(point, name,mapInit){
                var  myIcon  =  new BMap.Icon("http://www.yantongai.com/play/down.png", new BMap.Size(45,45),{
                    anchor: new BMap.Size(20, 45),//这句表示图片相对于所加的点的位置mapStart
                    imageSize:new BMap.Size(45, 45) //图标所用的图片的大小,此功能的作用等同于CSS中的background-size属性。可用于实现高清屏的高清效果
                });
                 window.marker = new BMap.Marker(point,{icon:myIcon});  // 创建标注
                 mapInit.addOverlay(marker);
            }
           
        }

最后我们要在 mounted 直接调用

mounted() {
        this.initMap();    
 }





相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客