vue谷歌地图聚合功能

五申请秘钥在入口文件里面引入写入key值

<script src="http://maps.google.cn/maps/api/js?key="></script>

写入一个存放地图的div标签

<div id="googleMap" style="height: 100%;"></div>

五在vue模板里面引入自定义的聚合图标并且挂在在vue实例是哪个

  import mar0 from "./img/img/0.png";import mar1 from "./img/img/1.png";import mar2 from "./img/img/2.png";import mar3 from "./img/img/3.png";import mar4 from "./img/img/4.png";export default {data() {return {map:null,infowindow:null,clickTimer: null,imgUrl22 :require("../../../../static/img/marker-1.png"),imgUrl11 :require("../../../../static/img/marker0.png"),markerStyles:[{url:mar0,width:53,height:53,},{url:mar1,width:56,height:56,},{url:mar2,width:66,height:66,},{url:mar3,width:78,height:78,},{url:mar4,width:90,height:90,},],markerCluster:null};},

初始化地图

   mounted() {this.mapBuild(); //初始化实例之后调用this.setPoint(this.pointsguge); //地图数据},methods: {mapBuild() {let mapProp = {center:new google.maps.LatLng(39.839472,116.288262),zoom:7,//缩放级数mapTypeId:google.maps.MapTypeId.ROADMAP};this.map = new google.maps.Map(document.getElementById("googleMap"),mapProp);//自定义的聚合图标this.markerCluster = new MarkerClusterer(this.map, [],{imagePath:this.markerStyles});},removePoints(){//清楚坐标点this.markerCluster.clearMarkers()},setPoint(pointsguge){console.error(pointsguge)this.removePoints();this.latlngbounds = new google.maps.LatLngBounds();let markers =[];let marker;let position;for(let node of pointsguge){position = new google.maps.LatLng(node.lat, node.lon);let icon = node.noticeLevel == '-1'  ? this.imgUrl22 : this.imgUrl11;marker =new google.maps.Marker({position: position,icon: icon});this.latlngbounds.extend(position);markers.push(marker)this.clickInfo(marker,node,this)}this.markerCluster.addMarkers(markers,false)if(!this.latlngbounds.isEmpty()){this.map.setCenter( this.latlngbounds.getCenter());}// this.map.fitBounds( this.latlngbounds);},clickInfo(marker,node,that){google.maps.event.addListener(marker, 'click', function() {//单击事件});google.maps.event.addListener(marker, 'dblclick', function() {//双击事件});},},

五级标题

vue谷歌地图聚合功能相关推荐

谷歌地图聚合点使用（GoogleMaps MarkerCluster）
我们有时候需要观察地图不同地方数据的所在范围和分布密集情况,热力图和聚合点的使用无疑是最好的选择. 1.首先说说百度地图,只做国内的地图可以使用百度地图的海量点和热力图还是蛮好用的. a.海量点的最 ...
vue 高德地图搜索功能_VUE中使用高德地图做轨迹添加功能,帮助轨迹展示
准备工作使用前准备 : 高德地图key 使用插件: vue-amap 1.npm安装vue-amap npm install vue-amap --save import AMap from 'vu ...
vue高德地图搜索功能
一.开发环境: vue版本:v2.5.2 vue-cli版本:v2.9.3 webpack版本:3.6.0 高德地图api版本:JavaScript API V1.4.12 二.直入主题首先在,in ...
vue + echarts+地图实现功能，实现地图上数据显示，四川省地图echarts地市数据案列
echart在开发地图时,会遇到下钻显示子区域地图数据.比如四川省,下钻到市级成都市,再下钻到区级.下载地址:DataV.GeoAtlas地理小工具系列 1.首先需要下载对应的地图,如果是联网的可以直 ...
vue中谷歌地图标记点、聚合点图标自定义
vue中谷歌地图标记点.聚合点图标自定义标记点自定义聚合点自定义完整代码最近用vue+谷歌地图做国外项目,地图需要有标记点和聚合点. 标记点:1,图标样式自定义 2,点击更换图标聚合点:1, ...
基本农田卫星地图查询_发现谷歌地图替代网站，卫星地图街景功能都能用
众所周知,由于谷歌地图(Google Maps)在国内不能访问,很多人就没有办法通过谷歌地图来获得服务.谷歌地图是目前全球最受欢迎的世界地图网站,在2005年以前,谷歌地图就收录了美国.英国.加拿大三 ...
在 ArcGIS Engine 应用程序中加载搜狗地图和谷歌地图。
在ArcGIS Engine 应用程序中加载搜狗地图和谷歌地图. Adding sogou map or google map in ArcGIS Engine application WebmapL ...
在ArcGIS Engine 应用程序中加载搜狗地图和谷歌地图
在ArcGIS Engine 应用程序中加载搜狗地图和谷歌地图. Adding sogou map or google map in ArcGIS Engine application WebmapL ...
iOS-百度地图聚合
百度地图的应用也是极为广泛,从基本的定位,大头针的展现到线路的规划等等,但如果地图页面上在某一个区域内展示的大头针过多的话会在地图上面一团一团的都是满满的大头针,或许我们将地图缩小到某个区域之后用户并 ...

vue谷歌地图聚合功能

五申请秘钥在入口文件里面引入写入key值

写入一个存放地图的div标签

五在vue模板里面引入自定义的聚合图标并且挂在在vue实例是哪个

初始化地图

五级标题

五级标题

五级标题

五级标题

vue谷歌地图聚合功能相关推荐

最新文章

热门文章

vue谷歌地图聚合功能

五申请秘钥在 入口文件里面引入 写入key值

写入一个存放地图的div标签

五在vue模板里面引入自定义的聚合图标并且挂在在vue实例是哪个

初始化地图

五级标题

五级标题

五级标题

五级标题

vue谷歌地图聚合功能相关推荐

最新文章

热门文章

五申请秘钥在入口文件里面引入写入key值