vue-aMap高德地图的应用(添加覆盖物点坐标、自定义图标、添加信息窗体信息等)

vue-aMap高德地图的应用(添加覆盖物点坐标、自定义图标、添加信息窗体信息等)

最近在项目开发中用到了aMap高德地图，简单记录一下，话不多说，直接上代码。
官方文档参考：高德地图aMap官方文档
1、安装amp

npm install vue-amap --save

2、main.js里引入amap

import AMap  from 'vue-amap'//引入高德地图并初始化
Vue.use(AMap)
AMap.initAMapApiLoader({
  //集合秘钥key
  key:'9dda7871b127d833afdc75274e12ae44',
  //插件集合
  plugin:[
    "AMap.Autocomplete", //输入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角缩略图插件 比例尺
    "AMap.OverView", //地图鹰眼插件
    "AMap.ToolBar", //地图工具条
    "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    "AMap.PolyEditor", //编辑 折线多，边形
    "AMap.CircleEditor", //圆形编辑器插件
    "AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置
  ]
})

3、在需要引入amap的组件内进行使用，其中el-amap-marker是进行坐标标识、el-amap-info-window进行信息窗体的实现。

<div class="aMap-wrapper">
            <el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle">
                <el-amap-marker
                        v-for="marker in markers"
                        :position="marker.position"
                        :key="marker.id"
                        :events="marker.events"
                        :icon="marker.icon"
                ></el-amap-marker>
                <el-amap-info-window
                        v-if="window"
                        :position="window.position"
                        :visible="window.visible"
                        :content="window.content"
                        :offset="window.offset"
                ></el-amap-info-window>
            </el-amap>
        </div>

4、data区进行数据初始化

data() {
            return {
                center: [121.126757,31.140653],
                zoom:12,
                mapStyle: "amap://styles/blue", //修改地图的背景颜色
                markers: [],
                windows:[],
                window:'',
            }
        },

5、根据需求引入自定义的坐标图标

import location from '../../../assets/img/waterLogo@3x.png'

6、methods方法定义标识pointMarker数据，我这里写的是静态数据，后续相关数据可通过接口获取。

methods:{
            point(){
                //自定义map点坐标图标
                let icon = new AMap.Icon({
                    image: location,
                    size: new AMap.Size(2, 2),
                    imageSize: new AMap.Size(2, 2)
                });

                let markers = [];
                let windows=[];
                let that=this;
                let pointMarker=[
                    {
                        lng:120.978008,
                        lat:31.083667,
                        stationName: "青浦水文站1",
                        buildTime:'2011-12-08',//建站时间
                        stationAddress:'上海市牛头山路东100m',//站址
                        temperature:'25.5℃',//温度
                        rainfall:'5mm',//雨量
                        windDirection:'西北',//风向
                        windSpend:'2.05m/s',//风速
                        waterLevel:'2.65m',//水位
                        waterVelocity:'1.2m/s',//流速
                        waterTraffic:'2.8m3/s',//流量
                    },{
                        lng:121.037746,
                        lat:31.105422,
                        stationName: "青浦水文站2",
                        buildTime:'2011-12-08',//建站时间
                        stationAddress:'上海市牛头山路东100m',//站址
                        temperature:'25.5℃',//温度
                        rainfall:'5mm',//雨量
                        windDirection:'西北',//风向
                        windSpend:'2.05m/s',//风速
                        waterLevel:'2.65m',//水位
                        waterVelocity:'1.2m/s',//流速
                        waterTraffic:'2.8m3/s',//流量
                    }
                    ]
                pointMarker.forEach((item,index)=>{
                    markers.push({
                        position: [item.lng,item.lat],
                        icon:location, //不设置默认蓝色水滴
                        events: {
                            click() {
                                that.windows.forEach(window => {
                                    window.visible = false; //关闭窗体
                                });
                                that.window = that.windows[index];
                                that.$nextTick(() => {
                                    that.window.visible = true;//点击点坐标，出现信息窗体
                                });
                            }
                        }
                    })
                    windows.push({
                        position: [item.lng,item.lat],
                        content:"" +
                            "<div>"+"站点名称："+item.stationName+"</div>" +
                            "<div>"+"建站时间："+item.buildTime+"</div>" +
                            "<div>"+"地 址："+item.stationAddress+"</div>" +
                            "<div>"+"温度："+"<span style='color: #66A0FF'>"+item.temperature+"</span>"+"</div>"+
                            "<div>"+"雨量："+"<span style='color: #66A0FF'>"+item.rainfall+"</span>"+"</div>"+
                            "<div>"+"风向："+"<span style='color: #66A0FF'>"+item.windDirection+"</span>"+"</div>"+
                            "<div>"+"风速："+"<span style='color: #66A0FF'>"+item.windSpend+"</span>"+"</div>"+
                            "<div>"+"水位："+"<span style='color: #66A0FF'>"+item.waterLevel+"</span>"+"</div>"+
                            "<div>"+"流速："+"<span style='color: #66A0FF'>"+item.waterVelocity+"</span>"+"</div>"+
                            "<div>"+"流量："+"<span style='color: #66A0FF'>"+item.waterTraffic+"</span>"+"</div>"
                        ,
                        offset:[5,-15],//窗体偏移
                        visible: false//初始是否显示
                    })
                })
                //添加点标注
                this.markers = markers;
                //生成弹窗
                this.windows=windows
            },
        },

7、mounted方法区调用上述的point()方法：

mounted(){
            this.point()
        }

8、下面是效果图：

搞定、兄弟萌赶快试试吧。