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

项目背景：要做一个数据大屏，需要用到地图以及点标记，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-amapref="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: {position: [112.987526,28.220296],content: '内容内容',events: {},visible: false},events: {init(o){o.setMapStyle("amap://styles/bf0b2bdda16d28c16977f0ca38d412fc"); //自定义的高德地图的样式o.setFeatures(['bg','building','road']); //设置地图里面显示的内容},//地图移动的时候关闭信息窗体mapmove(){app.currentWindow.visible = false  //这里得用”app.~“去调用vue里面的方法，我的vue的对象就是定义的”var app = new Vue({})“},//地图缩放的时候关闭信息窗体zoomchange(){app.currentWindow.visible = false},},markers: [],}mounted(){this.servicepoint() //调用方法}methods:{//关闭信息窗体closeWindow(){this.currentWindow.visible = false},//服务网点servicepoint(){var that = this;axios({method: 'post',url: '/api/organization/servicepoint',}).then(function(res){if(res.data.code == 1){var data = res.data.data;var markers = [];$.each(data,function(k,item){if(item.longitude && item.latitude){//三种点标记，设置三种不同的图标if(item.type == 1){var icon = '/assets/webimg/location_yellow.png';}else if(item.type == 2){var icon = '/assets/webimg/location_blue.png';}else{var icon = '/assets/webimg/location_white.png';}//定义每个点标记var marker = {id:item.id,   //自定义，做业务判断position:[item.longitude,item.latitude],  //必填icon: icon, //必填title:item.name,    //必填events:{    //events里面定义点标记的事件，比如点击事件click:()=>{// alert('click marker');if(item.type == 1){//给窗体内容赋值  content内容自定义，这个内容是纯字符串，可以使用原生写法，字符串拼接，但是这里面的所有事件都只能原生，不能使用vue的v-on:事件定义that.currentWindow = {visible:true,    //窗体显示position:[item.longitude,item.latitude],content:'<div class="infowindow">' +'<div class="title">'+item.name+'</div>' +'<div class="people">社区负责人：'+item.contact+' '+item.mobile+'</div>'+'<div class="closeicon" οnclick="closeWindow()"><i class="fa fa-close"></i></div>'+'</div>',};}else if(item.type == 2){that.currentWindow = {visible:true,position:[item.longitude,item.latitude],content:'<div class="infowindow">' +'<div class="title">'+item.name+'</div>' +'<div class="activitytime">活动时间：'+item.service_start+'-'+item.service_end+'</div>'+'<div class="people">报名人数：'+item.people+'人</div>'+'<div class="closeicon" οnclick="closeWindow()"><i class="fa fa-close"></i></div>'+'</div>',};}else{that.currentWindow = {visible:true,position:[item.longitude,item.latitude],content:'<div class="infowindow">' +'<div class="title">'+item.name+'</div>' +'<div class="activitytime">求助人：'+item.contact+' '+item.mobile+'</div>'+'<div class="people">' +'<div>需要人数：'+item.people+'人</div>'+'<div class="deal" style="cursor: pointer" οnclick="dealnowouter('+item.id+',2)">立即安排</div>'+'</div>'+'<div class="closeicon" οnclick="closeWindow()"><i class="fa fa-close"></i></div>'+'</div>',};}console.log('clicked marker')}},offset: new AMap.Pixel(-13, -30),    //偏移量clickable:true,    //点标记是否可以点击visible: true,   //点标记是否显示}if(item.type == 3){marker.contact = item.contact;marker.mobile = item.mobile;marker.address = item.address;}//将定义的点赋值到markers中markers.push(marker);}})that.markers = markers;that.ismap = true;}}).catch(function (error) {// handle errorconsole.error(error);}).then(function () {// always executed});},}
})

5.信息窗体中的点击事件

//使用原生写法
<script>//关闭信息窗体function closeWindow(){app.closeWindow();}
</script>

6.需要注意的地方

1.信息窗体自带的关闭按钮，一旦点击，后面再想让信息窗体出现，怎么都不会出现了，所以我换了一种方法实现，自己写了一个关闭按钮，然后自己写点击事件，也就是上文中的closeWindow，然后用jquery的点击去调用vue的点击，也就是app.method去调用vue的方法
2.去掉高德地图点标记、信息窗体的默认样式

.amap-container img {width: 25px;height: 34px;
}
//窗体关闭按钮样式
.amap-info-close{display: none;
}
//去掉窗体的sharp那个小三角形
.bottom-center .amap-info-sharp{display: none;
}
//定义最外框的窗体样式
.amap-info-content{width: 400px;background: rgba(22,46,92,0.7);border: 2px #2d67c3 solid;padding: 20px;
}
//然后就是针对content里面内容的样式定义了
.infowindow{width: 100%;height: 100%;position: relative;
}
.infowindow .title{font-size: 20px;color: #ffffff;line-height: 26px;font-weight: bold;
}
.infowindow .activitytime{font-size: 16px;color: rgb(181, 208, 255);margin: 10px 0 6px 0;
}
.infowindow .people{font-size: 16px;color: rgb(181, 208, 255);display: flex;align-items: center;justify-content: space-between;
}
.infowindow .people .deal{color: #EEEEF1;font-size: 14px;background: rgba(206, 90, 96, 0.55);padding: 3px 6px;border-radius: 2px;
}
.infowindow .closeicon{cursor: pointer;
}
.infowindow .closeicon i{position: absolute;top: 0;right: 0;color: #ffffff;width: 20px;height: 20px;
}

高德地图点标记及信息窗体的使用相关推荐

使用高德地图展示点位和信息窗体展示数据及播放视频
使用高德地图做了一个在地图展示点位,并通过点击,显示直播的功能,这个任务是为了之后大屏做准备. 这是一个能展示多个点标记,并在点击的时候弹出信息窗体,并在信息窗体中播放视频,且展示相关信息以及操作事件 ...
js如何同时打开多个信息窗口高德地图_高德地图-展示多个信息窗口
1.问题背景高德地图,设置小图标,并点击图标显示信息 2.实现源码高德地图展示多个信息窗口 //初始化地图对象,加载地图 var map = new AMap.Map("containe ...
高德地图鼠标经过点标记显示信息窗体
创建点标记: 实例化信息窗体放入鼠标移入/移出事件源码: // 获取站点 getData() {api.stationMap(this.params).then((res) => {cons ...
vue使用高德地图点标记及复杂操作
不知道怎么引用的可以在看下 https://blog.csdn.net/xy19950125/article/details/83213220 上面呢只是简单的一个点标记并没有涉及到复杂的操作 ...
uniapp+高德地图api 获取定位信息及详细地址
引入高德地图js api 高德地图api官方文档根据官方文档建议,我使用的是JSAPI Loader 并且是通过npm安装的 npm i @amap/amap-jsapi-loader --save ...
android使用高德地图SDK获取定位信息
注册账号.创建应用.获取API KEY等这些就不说了,按照官网来就行,我们来讲讲项目的配置及示例代码. 高德地图获取定位信息配置要比百度地图简单多了,这是我比较喜欢的一点,而且之前用百度地图嵌入一个应 ...
android 高德地图显示标题,android学习之高德地图添加标记
Marker用于标注地图上的一个特定位置 aMap的.addMarker(markerOptions) 方法即可 markerOptions有如下的属性 position(Required) 在地图上 ...
android高德地图用地址获取经纬度,高德地图API-获取位置信息的经纬度
一.首先需要注册成为开发者,注册成功后就可以使用此开放平台. 步骤如下: 1.百度搜索高德开放平台,进入网站.或者输入网址:https://lbs.amap.com/ 搜索高德开放平台高德开发平 ...
android 高德地图标记,android学习之高德地图添加标记
Marker用于标注地图上的一个特定位置 aMap的.addMarker(markerOptions) 方法即可 markerOptions有如下的属性 position(Required) 在地图上 ...

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

高德地图点标记及信息窗体的使用相关推荐

最新文章

热门文章