高德地图点标记及信息窗体的使用

项目背景:要做一个数据大屏,需要用到地图以及点标记,UI大致是这样:
在这里插入图片描述
我是结合vue使用的,vue调用高德地图有一个组件是vue-amap,基于vue2.0和高德地图的
我是后端开发,vue是才上手,没有使用npm安装,整个实现上可能走了一些弯路,下面整理一下实现步骤
1.引入amap的js,将key修改为你的高德key

<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.15&key=XXXXXXXXXXXXXXX&plugin=AMap.ToolBar'></script>

2.初始化地图

// 初始化高德地图的 key 和插件
var MapsEvent = window.VueAMap.initAMapApiLoader({
   
    key: '{
   $mapkey}',
    plugin: [
        'AMap.Autocomplete',    //输入提示插件
        'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor','MarkerClusterer'],
    v: '1.4.4'	// 默认高德 sdk 版本为 1.4.4
});

3.页面引入

1.使用3D的话就设置viewMode为3D
2.设置center中心点,一般数据大屏都会默认固定一个中心点,所以不用费心去实时获取当前定位点,直接选个坐标点了写死在页面就行了,或者是把中间点的坐标做成后台动态配置
3.zoom缩放比例根据实际业务
4.el-amap-marker 是点标记
5.el-amap-info-window是信息窗体,不是说每个点标记都要有一个独立的信息窗体,是共用的同一个信息窗体,所以点击每个点标记的时候将信息窗体的内容变化就好了

<el-amap
         ref="map"
         :vid="'mapDiv2'"
         viewMode="3D"
         map-style="dark"
         :center="center"
         :zoom="zoom"
         :events="events"
         class="amap-demo"
         rotateEnable="true"
 >
     <el-amap-marker v-for="(marker,index) in markers" :position="marker.position" :title="marker.title" :icon="marker.icon" :key="index" :events="marker.events"></el-amap-marker>
     <el-amap-info-window
             :position="currentWindow.position"
             :content="currentWindow.content"
             :visible="currentWindow.visible"
             :events="currentWindow.events">
     </el-amap-info-window>
 </el-amap>

4.配置数据

var app = new Vue({
   
     el: '#app',
     data: {
   
     	center: [112.987526,28.220296],
         zoom: 22,
         position: [112.987526,28.220296],
         icon:'/assets/webimg/location_blue.png',
         currentWindow: {
   
  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值