关于vue集成高德地图使用小结

安装插件：

一、script引入

在index.html文件直接引入高德地图js文件

<script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=6d66ac87504c030adb1b8a0616fb8ac4"></script>
<!--UI组件库1.0-->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

二、使用vue集成的高德组件

npm install vue-amap -S

1、vue项目中build文件夹下的webpack.base.config.js中需要配置,写在最下面''node{}''中就可以

externals: {
    'AMap': 'AMap',
    'Loca': 'Loca',
    'AMapUI': 'AMapUI'
}

2、项目中可以直接用 import AMap from Amap

<div id="container" style="width:100%;height:900px"></div>

初始化地图信息：

const map=newAMap.Map('container',{
    resizeEnable:true,//监控地图容器尺寸变化
    zoom:10,//缩放级别
    showIndoorMap:false,//是否在有矢量底图的时候自动展示室内地图，PC端默认是true，移动端默认是false
    showBuildingBlock:false//设置地图显示3D楼块效果，移动端也可使用。推荐使用。
});

 

地图插件引入方式：

map.plugin(['AMap.Scale'],function(){ //比例尺
    Let scale=newAMap.Scale();
    map.addControl(scale);
});

 

搜索功能：（需要引入搜索插件PlaceSearch）

Let autoOptions={
    city:'',
    input:"tipinput"
};
Let placeSearch=newAMap.PlaceSearch({
    pageSize:5,//单页显示结果条数
    pageIndex:1,//页码
    city:"010",//兴趣点城市
    citylimit:true,//是否强制限制在设置的城市内搜索
    map:map,//展现结果的地图实例
    autoFitView:true//是否自动调整地图视野使绘制的Marker点都处于视口的可见范围
});//构造地点查询类

Let autocomplete = newAMap.Autocomplete(autoOptions);

AMap.event.addListener(autocomplete,'select',function(e){
    placeSearch.setCity(e.poi.adcode);
    placeSearch.search(e.poi.name);//关键字查询查询
});

AMap.event.addListener(placeSearch,"markerClick",function(e){//搜索以后生成的marker的点击事件
    self.$Notice.warning({title:"当前经度："+e.data.location.lng+",纬度"+e.data.location.lat});
});

 

根据当前IP定位： （需要引入定位插件Geolocation）

map.plugin('AMap.Geolocation',function(){//定位
    Let geolocation=newAMap.Geolocation();
    map.addControl(geolocation);
    geolocation.getCurrentPosition(function(status,result){
        if(status==='complete'){
        map.center=[result.position.lat,result.position.lng];
        }else{
        this.onError(result)
        }
    });
});

 

设置marker点：

let marker = newAMap.Marker({
    content:'<divclass="marker">'+显示+'</div>',
    position:[lng,lat],
    map:map,
    label:{
        offset:newAMap.Pixel(20,20),//修改label相对于maker的位置
        content: 'marker名称'
    }
});

 

构造矢量圆形:

var circle = new AMap.Circle({
    center: new AMap.LngLat("116.403322", "39.920255"), // 圆心位置
    radius: 1000,  //半径
    strokeColor: "#F33",  //线颜色
    strokeOpacity: 1,  //线透明度
    strokeWeight: 3,  //线粗细度
    fillColor: "#ee2200",  //填充颜色
    fillOpacity: 0.35 //填充透明度
});
map.add(circle);
map.setFitView();

 

marker点 点击展示详情

var infoWindow = new AMap.InfoWindow({
    autoMove: true,
    offset: {x: 0, y: -30}
});
marker.on('click',function(e){
infoWindow.setContent(self.createContent(item));
    infoWindow.open(map,e.lnglat);
}); 
createContent(poi){//信息窗体内容
let s=[];
s.push("<b>名称："+poi.name+"</b>");
s.push("地址："+poi.address);
returns.join("<br>");
},

 

根据地址获取经纬度

Let cusMarker=newAMap.Marker({              
    content:'<imgsrc="https://a.amap.com/jsapi_demos/static/resource/img/user.png"
style="width:36px; height:36px/>',
    map:map,
    label:{
        offset:newAMap.Pixel(20,20),//修改label相对于maker的位置
        content:'天下·国际公馆(北2门)'
    }
});

Let geocoder=newAMap.Geocoder();
geocoder.getLocation("武汉市江岸区新华路322号附近",function(status,result){
    if(status==='complete'&&result.geocodes.length){
        cusMarker.setPosition([result.geocodes[0].location.lng,
        result.geocodes[0].location.lat]);
        map.add(cusMarker)
    }else{
        log.error('根据地址查询位置失败');
    }
});

 

计算两点直线距离 注：marker需要添加draggable:true属性

Let line = null,
Let  text = null,
marker[rowid].on('dragging',computeDis(marker.getPosition(),cusMarker.getPosition(),map));
cusMarker.on('dragging',computeDis(marker.getPosition(),cusMarker.getPosition(),map));
computeDis(p1,p2,map){
    let textPos=p1.divideBy(2).add(p2.divideBy(2));
    let distance=Math.round(p1.distance(p2));
    let path=[p1,p2];
    if(!line){
        line=newAMap.Polyline({
            map:map,
            strokeColor:'#80d8ff',
            isOutline:true,
            outlineColor:'white',
            path:path
        });
    }else{
        line.setPath(path);
    }
    if(!text){
        this.text=newAMap.Text({
            text:'两点相距'+distance+'米',
            position:textPos,
            map:map,
            style:{
                'background-color':'#29b6f6',
                'border-color':'#e1f5fe',
                'font-size':'12px'
            }
        })
    }else{
        text.setText('两点相距'+distance+'米');
        text.setPosition(textPos)
    }
}