google地图标记

最新推荐文章于 2022-09-28 22:05:42 发布

Moon微光

最新推荐文章于 2022-09-28 22:05:42 发布

阅读量2.1k

点赞数

文章标签： google地图标记

本文链接：https://blog.csdn.net/weixin_40785842/article/details/89399401

版权

使用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中调用，即可解决上面问题。