google地图标记

使用richmarker插件来给google地图做地图标记。插件下载地址

链接：https://pan.baidu.com/s/1p-b42vbbKv2nGr1HasK4Tw
提取码：dd80

google地图自带的空气钉可以添加icon作为背景图，但是面对长短不一的文案时，就比较难受了，还有就是要求使用指定的样式时也是一个比较大的问题。这是使用richmarker就能很好的解决。当你使用richmarker时请注意，作出的标记会再地图放大缩小的时候位置会跟着变化，但是标记左上角的位置不会变，因为你的容器在渲染的时候是从左到右从上到下渲染的。

首先初始化插件

var marker = new RichMarker({position: new google.maps.LatLng(hs_lat, hs_lng), //  设置标记的位置map: map,content: priceContainer, // 标记的内容flat: !0 // 是否平坦
});

markers.push(marker),marker.addListener("click", // 空气钉添加点击事件function() {$(infoBoxs).each(function(i, v) {v.setVisible(!1),$(".zz_boxmarker").removeClass("active");}),$(".zz_boxmarker[data-hid=" + hs_houseid + "]").addClass("active"), // 当前点击的事件添加css样式infobox.setVisible(!0),infobox.setZIndex(999),map.panTo({ // 地图中心点移动lat: Number(hs_lat),lng: Number(hs_lng)});}),$this.hover(function() {map.panTo({lat: Number(hs_lat),lng: Number(hs_lng)}),$(".zz_boxmarker[data-hid=" + hs_houseid + "]").addClass("active");},function() {$(".zz_boxmarker[data-hid=" + hs_houseid + "]").removeClass("active");});

当同时请求google地图和richmarker.js时可能会出现先加载richmarker.js 在加载google地图的情况（这种情况会报google undefined）我的解决方法是把richmarker中的js 封装为一个方法，放在initmap中调用，即可解决上面问题。

google地图标记相关推荐

javascript 标记_如何使用JavaScript更改Google Maps标记的颜色
javascript 标记 by Tan Le Tian 谭乐天如何使用JavaScript更改Google Maps标记的颜色 (How to change the color of Google ...
关于google地图api3的离线和在线开发（画带箭头的直线，指定范围，搜索，计算距离）
最近因为开发的需要,要做一个离线的google地图.并且能够加载google地图的一些特效.例如:地图的标记,计算距离,获取标记的经纬度,画带有箭头的直线,获取指定范围的数据等等.在这里我总结了很多开 ...
基于大数据的Uber数据实时监控（Prat 3：使用Vert.x的实时仪表盘）
导言据Gartner称,到2020年智能城市将使用约13.9亿辆联网车,物联网传感器和设备.城市内的位置和行为模式分析将有助于优化流量,更好的规划策略和更智能的广告.电信公司正在使用移动电话位置数据 ...
Google Maps API v3：如何删除所有标记？
本文翻译自:Google Maps API v3: How to remove all markers? In Google Maps API v2, if I wanted to remove al ...
免费下载谷歌maps软件_Android Google Maps示例教程
免费下载谷歌maps软件 In this tutorial we'll discuss and implement some interesting features of android googl ...
maps-api-v3_利用Google Maps API发挥创意
maps-api-v3 您已经设计了一个闪亮的新网站: 仔细选择颜色,版式和照片,以完美反映公司的品牌形象. 然后您的客户要求您添加地图. 当然,您可以使用地图构建"向导",例如每 ...
vue 高德地图标记_vue-element-admin 引入高德地图并做海量点标记
第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. 第二 ...
谷歌地图开发使用记录 Google Maps
谷歌地图开发文档申请谷歌地图密钥可参考此链接https://blog.csdn.net/edsoki/article/details/123391685 https://www.wppop.com ...
2021年在vue中使用 Google Map
目前在vue中使用google map有以下两种方法: 一.使用 JavaScript 创建地图实例该方法优点在于可配置项多,方便自定义,缺点是较复杂,且文档为英文,有一定学习难度. 在开始之前确保 ...

google地图标记

google地图标记相关推荐

最新文章

热门文章