vue-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" //定位控件，用来获取和展示用户主机所在的经纬度位置
  ],
  v: '1.4.4',
})

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/[email protected]'

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:"" +
                            "
"+"站点名称："+item.stationName+"
" +
                            "
"+"建站时间："+item.buildTime+"
" +
                            "
"+"地 址："+item.stationAddress+"
" +
                            "
"+"温度："+""+item.temperature+""+"
"+
                            "
"+"雨量："+""+item.rainfall+""+"
"+
                            "
"+"风向："+""+item.windDirection+""+"
"+
                            "
"+"风速："+""+item.windSpend+""+"
"+
                            "
"+"水位："+""+item.waterLevel+""+"
"+
                            "
"+"流速："+""+item.waterVelocity+""+"
"+
                            "
"+"流量："+""+item.waterTraffic+""+"
"
                        ,
                        offset:[5,-15],//窗体偏移
                        visible: false//初始是否显示
                    })
                })
                //添加点标注
                this.markers = markers;
                //生成弹窗
                this.windows=windows
            },
        },

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

mounted(){<!-- -->
  this.point()
}

效果图：