最近项目开发中遇到了高德地图自定义点的样式，点击展示信息窗体的需求。做个总结！

初始化地图展示点和点击展示信息窗体

我们用的Vue开发的，所以在这儿我用Vue中例子来说！

1、html标签创建地图放置的容器

//要给地图添加宽高属性
<div id="container" class="map" tabindex="0"></div>

2、在methods中定义方法，写展示地图内容的所有逻辑：

methods:{//初始化地图，mounted钩子函数中调用！initCreateMap(){//创建地图实例，挂载到上面定义的html标签元素上，给到一个变量后续操作let map = new AMap.Map("container", {resizeEnable: true,//是否自适应地图容器尺寸的变化center: [120.980899, 31.385374],//初始地图的中心点坐标zoom: 11,//地图展示层级mapStyle: "amap://styles/fresh", // 极夜蓝，地图的风格样式});//定义点击展示一些信息的窗体let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(6, -20),//设置偏移量});//获取到服务器的数据（经纬度，名称、地址等你要展示的信息）let data = this.parkInfoMarks;//自定义地图点位图标let startIcon = new AMap.Icon({// 图标尺寸size: new AMap.Size(35, 35),// 图标的取图地址image: require('../assets/img/park.png'),// 图标所用图片大小imageSize: new AMap.Size(35, 35),// 图标取图偏移量imageOffset: new AMap.Pixel(0, 0)});//定义多个点位的数据列表let mapMarkerList = [];for (let i = 0; i < data.length; i++) {//经纬度，点位渲染let longitude = data[i].longitude;let latitude = data[i].latitude;//定义单个点位的基本信息let marker = new AMap.Marker({position: [longitude, latitude], //正确写法icon: startIcon,//上面定义的你的图标样式在这儿content: data[i],//你要展示的数据，循环带到content上，展示的时候使用offset: new AMap.Pixel(-10, -10),//点位的偏移量});//给点添加点击事件，在这儿也能添加鼠标移入事件marker.on("click", markerClick);mapMarkerList.push(marker);//所有点位推到上面的定义的点位数据列表中map.add(mapMarkerList);//调用map的add方法点位列表渲染到地图中}//点位点击事件，展示信息窗体function markerClick(e) {console.log(e);let data = e.target.content//通过类选择器给窗体添加样式infoWindow.setContent(`<div class="infowindows"><h2>${data.parkName}停车场</h2><p>地址：${data.address}</p></div>`);infoWindow.open(map, e.target.getPosition());}}
}

官方API文档地址：

点标记-点标记-示例中心-JS API 示例 | 高德地图API高德开放平台官网https://lbs.amap.com/demo/javascript-api/example/marker/marker-content/

目前正在学习中，如有错误请及时指正！！！

前端项目使用高德API，创建地图，撒点，自定义标记点样式，点击点位展示信息提示窗体相关推荐

出行助手Vue项目中高德API的使用
本文章是出行助手项目使用高德API的一些经验,见程序代码及注释, 详情请查看高德API 高德地图初始化加载定位到当前城市(具体位置): 设置一个div挂载高德地图:<div id="m ...
前端项目统一管理API接口
前端项目统一管理API接口如今的前端框架层出不穷.应对的项目也是大小不一,微型的项目倒是无所谓文件结构,大多数项目我们都需要做到以下几点规范文件目录,完善项目结构,以达到开发时思维清晰,错误定位准 ...
vue2项目使用高德api内嵌地图，点标记+行政区分颜色
前言:公司想在vue2项目中嵌入海南省的地图,在地图上标记出一些地址信息,省内的县区等各个区块展示不同的颜色,需求不是很难. 官网:https://lbs.amap.com/api/jsapi-v2/ ...
android开发百度地图定位+搜索周边+点击兴趣点+显示旗袍,高德地图API之地图搜索+兴趣点POI+标记点操作...
使用AMap.Autocomplete() 自动补全插件,实现搜索功能 metacharset="UTF-8"title>map style>*{margin:0;pa ...
更换百度地图图标html,百度地图接口，自定义图标，点击切换图标
这里实现了一个指定地区的地图,自定义图标,点击切换图标 1.[代码][JavaScript]代码 body, html,#allmap {width: 100%;height: 100%;overfl ...
vue前端项目引用高德离线地图
由于上一篇下载离线地图瓦片的工具有问题,需要更换工具重新下载离线瓦片,步骤如下: 下载离线瓦片(后端) 1.1用MapDownloader,下载离线地图瓦片工具提取码: mmdl 需要对工具作如下配 ...
记录一次vue项目引入GoogleMap API进行地图定位
背景公司项目进行国际化处理,需要将定位信息地图替换成谷歌地图. 一.Google 账号准备用谷歌账户登录谷歌云平台 https://cloud.google.com/maps-platform/? ...
centerandzoom 无效_Django调用百度地图api在地图上批量增加标记点
在调用百度地图api进行web开发时遇到了一个需求,我们需要在网页中内嵌一个div 然后在div中调用百度地图的js显示我们所需要的地区.根据需求坐标在地图上添加若干个标记点,并批量的为各个标记点设置 ...
ArcGIS API for JS4.7加载FeatureLayer，点击弹出信息并高亮显示
我加载的是ArcGIS Server本地发布的FeatureService,ArcGIS API for JS4.7记载FeatureLayer时,在二维需要通过代码启用WebGL渲染,在三维模式下, ...

前端项目使用高德API，创建地图，撒点，自定义标记点样式，点击点位展示信息提示窗体

初始化地图展示点和点击展示信息窗体

1、html标签创建地图放置的容器

2、在methods中定义方法，写展示地图内容的所有逻辑：

前端项目使用高德API，创建地图，撒点，自定义标记点样式，点击点位展示信息提示窗体相关推荐

最新文章

热门文章