vue+antv L7实现高德地图自定义样式和自定义marker

实现思路

1.在index.html中引入antv L7和高德地图

<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.3.0-beta.4/build/L7-min.js"></script>

<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: "",// 高德地图密匙};
</script>
<link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css"/>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=高德地图的key&plugin=AMap.Autocomplete,AMap.PlaceSearch,Map3D"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

2.绘制地图容器

<div id="map" class="map"></div>

3.绘制地图

data() {return {scene: null, data:[{id: 1,name: '',lng: '',lat: '',}
}
...
methods: {    initMap() {const that = this;const scene = new L7.Scene({id: "map",mapStyle: "amap://styles/bdcd5fccbfefcce4c42fa231058d089d", // 样式URLcenter: [],// 中心点的经纬度pitch: 0,zoom: 4,zoomControl: false,scaleControl: false,});this.scene = scene;scene.on("loaded", function () {that.drawMarker(scene);});},

4.绘制marker

      drawMarker(scene) {this.data.forEach((item, i) => {// 自定义marker样式let el = document.createElement("div");el.className = "marker-wrap";el.innerHTML = `<div class="marker"><span class="title">${item.name}</span></div>`new L7.Marker({element: el,}).setLnglat([item.lng, item.lat]).addTo(scene);});},

5.绘制自定义弹窗

        addPopup(position, name) {// 自定义popup样式const start = `<div class="popup"><span class="title">${name}</span><div class="num-wrap inline">`;new L7.Popup().setLnglat(position).setHTML(start).addTo(this.scene);},

vue+antv L7实现高德地图自定义样式和自定义marker相关推荐

vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
在vue项目中使用高德地图
需求很重要,有需求你才有努力解决问题的方向,加油! 在我们使用vue构建项目的时候,难免在业务需求上会遇到使用高德地图的时候,这时候问题就来了. 我们该怎么在vue项目中插入高德地图?通过度娘我知道了 ...
高德地图API 添加标点自定义标点
高德地图API 添加标点自定义标点在我们创建完地图实例后,就可以在地图中添加遮盖物,覆盖物有多种类型,今天只说点标记首先构造一个点标记添加默认样式点标记 // 构造点标记 var marker ...
安卓配高德地图离线样式
安卓配高德地图离线样式选择地图样式在高德地图的个人中心选择自定义地图: 选择需要的地图样式,点击发布获取地图配置在我的自定义地图中,点击使用与分享然后切换到Android样式调用,点击下载离 ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
vue openlayers 加载高德地图等 gcj02 的图层偏移问题
vue openlayers 加载高德地图等 gcj02 的图层偏移问题这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题,所以说呢这篇博文稍微说一下解决办法. ...
html 加载高德地图,vue异步加载高德地图
几种加载js的方式同步加载异步加载延迟加载同步加载用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的 ...
vue 项目中使用高德地图
官方文档: 高德地图API官网高德地图2.0参考手册高德地图JS API 2.0 示例在项目中使用 vue-amap 高德地图JSAPI在Vue框架下使用高德地图在线 JS API 示例一. ...
高德地图 - 点击改变当前 marker 图标（marker点击切换 icon 上一个 icon 恢复原样）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

vue+antv L7实现高德地图自定义样式和自定义marker

vue+antv L7实现高德地图自定义样式和自定义marker相关推荐

最新文章

热门文章