标记点自定义

标记点自定义图标主要是设置 url 地址，记住 url 直接引入图片的地址需要用到 require('../../***.png')
代码：

new google.maps.Marker({position: item,icon: {          //  icon对象里面设置标记点的图标和图标宽高url: require("../../../static/images/maker.png"),size: {width: 46,height: 50,},},
})
//  通过setIcon方法更换标记点图标
item.setIcon(require("../../../static/images/maker_touch.png"))

具体的其他属性可以参考官网：地图标记

聚合点自定义

聚合点更换图标也不复杂，官方给出的案例我试了，没有作用，参考的是源代码。
代码：

//  这里写五个是因为标记点必须要有五个，官方是有五个不同样式的标记点，这里我用的是相同的五个，
import mar1 from "../../../static/images/marker_clusterer1.png";
import mar2 from "../../../static/images/marker_clusterer2.png";
import mar3 from "../../../static/images/marker_clusterer3.png";
import mar4 from "../../../static/images/marker_clusterer4.png";
import mar5 from "../../../static/images/marker_clusterer5.png";
markerStyles:[{url:mar1,width:46,height:48,textSize: 16,  //  聚合点内字体大小，下面有更多属性},{url:mar2,width:46,height:48,textSize: 16,},{url:mar3,width:46,height:48,textSize: 16,},{url:mar4,width:46,height:48,textSize: 16,},{url:mar5,width:46,height:48,textSize: 16,},
],
//  关键在这句话，官方给的案例里面是 imagePath ，我试了没有作用
new MarkerClusterer(map, markers, { styles: this.markerStyles })
//  聚合点源码static withDefaultStyle(overrides: ClusterIconStyle): ClusterIconStyle {return {textColor: "black",textSize: 11,textDecoration: "none",textLineHeight: overrides.height,fontWeight: "bold",fontStyle: "normal",fontFamily: "Arial,sans-serif",backgroundPosition: "0 0",...overrides,};}

具体的其他属性可以参考官网：地图聚合点
这个页面可以跳转到官方的聚合点github，里面可以看到用TS写的源码，有需要可以进行参考

完整代码

import mar1 from "../../../static/images/marker_clusterer1.png";
import mar2 from "../../../static/images/marker_clusterer2.png";
import mar3 from "../../../static/images/marker_clusterer3.png";
import mar4 from "../../../static/images/marker_clusterer4.png";
import mar5 from "../../../static/images/marker_clusterer5.png";
export default {name: "test",data() {return {// 谷歌地图聚合点样式更换markerStyles:[{url:mar1,width:46,height:48,textSize: 16,},{url:mar2,width:46,height:48,textSize: 16,},{url:mar3,width:46,height:48,textSize: 16,},{url:mar4,width:46,height:48,textSize: 16,},{url:mar5,width:46,height:48,textSize: 16,},],}},methods: {// ---------------谷歌地图-------------------// 页面第一次渲染谷歌地图加载全部坐标点(显示聚合点)//  data参数是所有的标记点数组setAllGooglePosition(data) {let options = {zoom: 10,center: { lat: data[0].lat, lng: data[0].lng },zoomControl: true,// 操作按钮的位置zoomControlOptions: {position: google.maps.ControlPosition.RIGHT_CENTER,},streetViewControl: false,}let map = new google.maps.Map(document.getElementById("screenGmap"), options)const markers = data.map((item, i) => {return new google.maps.Marker({position: item,icon: {url: require("../../../static/images/maker.png"),size: {width: 46,height: 50,},},})})markers.map((item, index) => {item.addListener("click", () => {//  点击标记点弹窗显示具体信息  this.$t 用的是I18N做的国际化let contentString = `<div id="window-box"><div>${ this.$t('mapMarker.title') }Lamp-post</div><div><label>${ this.$t('mapMarker.lng') }：</label>${data[index].lng}</div><div><label>${ this.$t('mapMarker.lat') }：</label>${data[index].lat}</div><div><label>${ this.$t('mapMarker.name') }：</label>${data[index].label}</div><div><label>${ this.$t('mapMarker.group') }：</label>${data[index].groupName}</div><div><label>${ this.$t('mapMarker.device') }：</label>${data[index].count}</div></div>`let infowindow = new google.maps.InfoWindow({content: contentString,minWidth: 200});//  通过setIcon方法更换标记点图标item.setIcon(require("../../../static/images/maker_touch.png"))infowindow.open(map, item);map.addListener('click', function() {item.setIcon(require("../../../static/images/maker.png"))infowindow.close();})});});new MarkerClusterer(map, markers, { styles: this.markerStyles })},// ---------------谷歌地图-------------------}
}

代码写的不是很成熟，不过基本的实现是有用，有哪里写的有错误的地方欢迎各位大佬指出。

注： 1，谷歌地图不是下载的第三方包使用的，我是直接引入的script，有了script，就可以使用谷歌地图的实例方法。
2，在国内用谷歌地图还有一个坑就是，首先需要fanqiang，其次就是用免费的很容易地图不出现，控制台打印：google is not defined ，这个时候检查一下有没有fanqiang，或者说fanqiang的网络好不好，当然如果这些问题都不存在，那就考虑一下是不是地图apikey的引入问题

vue中谷歌地图标记点、聚合点图标自定义相关推荐

vue 引入json地图_使用vue引入maptalks地图及聚合效果的实现
1.安装maptalks.js npm install maptalks --save 2.安装聚合mapkercluster npm install maptalks.markercluster 3 ...
html地图无法点击,无法触发谷歌地图标记点击事件从HTML按钮
我尝试创建一个HTML按钮,可以触发谷歌地图上的标记的点击事件,所以每当我点击按钮,地图将自动放大到标记和显示infowindow.这里是我的代码无法触发谷歌地图标记点击事件从HTML按钮 Semua ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue中修改浏览器标签栏title和图标
vue中修改浏览器标签栏title和图标一.修改文字在项目中的index.html文件title标签中直接写二.修改标签栏图片 1.在项目中的static文件中放入一张图片 2.在index.h ...
vue中百度地图使用及自定义点聚合样式
百度地图使用及点聚合功能由于后台固定了百度地图,百度地图和高德地图经纬度转换有次数限制,不能满足项目的正常运行,所以切换了百度地图,下面对使用中遇到的问题进行记录: 安装及使用百度地图: npm i ...
vue使用谷歌地图绘制图形以及地图选点功能
因做加拿大配送项目得用到谷歌地图效果图: 第一步: 首先访问谷歌地图以及文档需要加速插件你得在谷歌浏览器扩展程序里添加一个加速插件(如图): 最好充值vip,不然免费的加速通道不稳定本人是在vu ...
Vue中百度地图（vue-baidu-map）的使用
1.开始 vue-map-baidu:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation 百度地图开发者平台申请密钥详见: h ...
vue人员轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
在html和vue中使用iconfont的symble色彩图标
在html以及vue中使用iconfont的symbol图标写给新手看的首先注册iconfont,并创建一个项目,在图标库把选择的图标加入项目可以选择使用在线链接,这里推荐下载到本地要注意使用 ...

vue中谷歌地图标记点、聚合点图标自定义

vue中谷歌地图标记点、聚合点图标自定义

标记点自定义

聚合点自定义

完整代码

vue中谷歌地图标记点、聚合点图标自定义相关推荐

最新文章

热门文章