自定义google map marker、tooltips、toggle switch、map st

DTeam 发布于2019-08-19 14:40 / 3397人阅读

摘要：一个小项目要使用作为主要展示方式，在地图上展示世界某发展现状。完成了，跟默认的方法其实一模一样自定义因为使用了自适应布局，发现定位坐标也有点难，用普通的方法使用一个展示，时抓坐标，周围偏移个展示。最后使用了自定义方法来用模拟，效果不错。

一个小项目要使用google map作为主要展示方式，在地图上展示世界某发展现状。虽然原来使用过google map，但还是花了两天时间才将主要的地图功能开发完成，这里记录一下，自用，高手请不要拍砖。

js实现的gist地址：https://gist.github.com/jy00295005/11077920

自定义 map marker

google给了default的大头针作为marker，也可以改成其他的图片，但是我的需求是需要同时展示两种marker：
1. 不同颜色大小的圆球、圆球中显示数字
2. 使用大头针marker展示机构

圆球与数字
没有美工，我找了google的cluster marker图片

使用不同的图片作为marker很简单，只要在定义marker时给google api地址就ok

icon: helper.map.config.pin_icon_url

但是在marker上加数字花了一点时间google，自己写好像还不是很简单，最后使用的方法是用一个包markerwithlabel.js

新建marker是不再使用原来google默认的方法 google.maps.Marker()，而采用MarkerWithLabel()，构建方法和默认一模一样，就是可以多传些label的参数上去。

var marker_country = new MarkerWithLabel({
    position: new google.maps.LatLng(_country_data.lat, _country_data.long),
    map: _map,
    country: _country_data.country,
    icon : icon_val.icon_url,
    draggable: false,
    raiseOnDrag: ture,
    labelContent: ""+_country_data.value,
    labelAnchor: new google.maps.Point(icon_val.xIndex, icon_val.yIndex),
    labelClass: "mapIconLabel", // the CSS class for the label
    labelInBackground: false
});

ok 完成了，跟默认的方法其实一模一样

自定义marker tooltips

因为使用了自适应布局，发现定位tooltips x、y坐标也有点难，用普通的方法：使用一个hidden tooltip div展示tooltip，mouseover marker时抓坐标，周围偏移10个px展示tooltip div。但是因为使用了自适应的div布局，每次用户改变浏览器窗口时坐标会改变，如果要检测用户窗体大小重新计算显然不是很好的解决方案。

最后使用了google 自定义infoWindow方法来用infoWindow模拟tooltips，效果不错。还是用了一个包infobox.js

//新的infoWindow tooltipOptions
tooltipOptions : {
    content : document.getElementById("infobox"),
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-70, 0),
    zIndex: null,
    boxStyle: {
        "background": "#f0ad4e",
        "opacity": 0.75,
        "width": "100px",
        "border-style": "solid",
        "border-width": "1px",
        "border-color": "#646464",
        "border-radius": "3px 3px 3px 3px"
},
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "",//空就没有关闭的叉叉了
infoBoxClearance: new google.maps.Size(1, 1)
}

//声明infoWindow tooltip
var infoWindow_tooltip = new InfoBox(helper.map.config.tooltipOptions);

//在监听事件中使用
google.maps.event.addListener(marker_country, "mouseover", function (e) {
     _infoWindow_tooltip.setContent("" + marker_country.country + "");
    _infoWindow_tooltip.open(_map, marker_country);
});

google.maps.event.addListener(marker_country, "mouseout", function () {
    _infoWindow_tooltip.close();
});

toggle switch

滑动按钮展示/隐藏第二种marker

show

hide

使用angularJS实现很简单
html 按钮

angular methods

//初始化的时候多带带绘制inst_markers
var inst_markers = helper.map.create_country_OA_maker(
    s.map, 
    infoWindow, 
    infoWindow_tooltip, 
    false, 
    inistutes_data
);


//点击toggle按钮时根据survey_show判断是画还是不画inst_markers
s.pick_survey = function (survey_show) {
    if (survey_show) {
        inst_markers = helper.map.create_country_OA_maker(
            s.map, 
            infoWindow, 
            infoWindow_tooltip, 
            false,
            inistutes_data
        );

    } else{
        helper.map.destroyMarker(
            inst_markers.institute_markers
        );

        inst_markers = helper.map.create_country_OA_maker(
            s.map, 
            infoWindow, 
            infoWindow_tooltip, 
            false,
            false
        );
    };
}

自定义map style

参考下面回单中给的几个网址
http://segmentfault.com/q/1010000000450074

js实现的gist地址：https://gist.github.com/jy00295005/11077920

开发就一个人，没有美工没有设计，界面土没办法

GPU云服务器云服务器百度地图map_marker google-maps 在jsp中定义map map()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78058.html

Plain——使用同一套代码创建你的 web 地图应用

摘要：简体中文特性如何使用安装使用安装，你也可以在页面中引入构建后的文件。顺便校正下地图窗口接下来我们要取消事件监听点击此处查看更多示例 showImg(https://segmentfault.com/img/bVbuafN?w=200&h=200); 使用同一套代码创建你的 web 地图应用。 ✨ https://github.com/XingzheFE/... English | 简体...

loonggg 2019-08-23 18:14 评论0 收藏0
石家庄生育健康服务平台项目

摘要：生育健康平台算是我做过的比较完整，也比较大的一个项目了。首先，主要做的还是写前台，因为后台我们这里用原来的项目的接口即可。孕前保健孕期保健儿童保健生殖健康就是通过在标签下放好类，然后在点击时切换类然后调接口拼接页面想要的内容。生育健康平台算是我做过的比较完整，也比较大的一个项目了。现在想记录一下，总结一下做的过程，遇到的难点。首先，主要做的还是写前台，因为后台我们这里用原来的项目...

springDevBird 2019-08-30 15:44 评论0 收藏0
石家庄生育健康服务平台项目

摘要：生育健康平台算是我做过的比较完整，也比较大的一个项目了。首先，主要做的还是写前台，因为后台我们这里用原来的项目的接口即可。孕前保健孕期保健儿童保健生殖健康就是通过在标签下放好类，然后在点击时切换类然后调接口拼接页面想要的内容。生育健康平台算是我做过的比较完整，也比较大的一个项目了。现在想记录一下，总结一下做的过程，遇到的难点。首先，主要做的还是写前台，因为后台我们这里用原来的项目...

MAX_zuo 2019-08-26 10:35 评论0 收藏0
深入理解JavaScript系列10:S.O.L.I.D五大原则之依赖倒置原则

摘要：前言本章我们要讲解的是五大原则语言实现的第篇，依赖倒置原则。当应用依赖倒置原则的时候，关系就反过来了。在当静态类型语言的上下文里讨论依赖倒置原则的时候，耦合的概念包括语义和物理两种。依赖倒置原则和依赖注入都是关注依赖，并且都是用于反转。前言本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第5篇，依赖倒置原则LSP（The Dependency Invers...

chenjiang3 2019-08-19 17:22 评论0 收藏0