如何在 jVectorMap 中添加标记？答案

【问题标题】：How to add Marker in jVectorMap?如何在 jVectorMap 中添加标记？
【发布时间】：2015-10-19 12:42:00
【问题描述】：

我是 jVectorMap 的新手。我已经从链接中获得了谷歌地图：http://codepen.io/anon/pen/RPjJYb。我正在尝试向此地图添加标记。我尝试了以下代码，但无法向地图添加标记：

$('#vmap').vectorMap({
    map: 'usa_en',
    backgroundColor: null,
    color: '#D2D3D4',  //#F58025
    hoverColor: '#754200',
    selectedColor: '#F58025',
    borderColor: '#FFFFFF',
    enableZoom: false,
    showTooltip: false,
    regionsSelectable: true,

    markersSelectable: true,
    markerStyle: {
        initial: {
            fill: 'grey',
            stroke: '#505050',
                "fill-opacity": 1,
                "stroke-width": 1,
                "stroke-opacity": 1,
            r: 5
        },
        hover: {
            stroke: 'black',
            "stroke-width": 2
        },
        selected: {
            fill: 'blue'
        },
        selectedHover: {
        }
    },
    markers: [
         {latLng: [41.8781136,-87.6297982], name: "My marker name",style: {fill: 'yellow'}},
    ],
    onRegionClick: function(element, code)
    {
    alert(code);
    }

});

请帮助我。提前致谢。

【问题讨论】：

标签： javascript jquery jquery-plugins jvectormap

【解决方案1】：

您使用的不是jVectormap，而是jqvmap。我不认为它实现了标记。

您可以切换到 jVectorMap，它有点不同，但它有如下标记：http://jvectormap.com/examples/markers-world/

简单演示：http://jsfiddle.net/IrvinDominin/96o28qnh/

【讨论】：

非常感谢您的回复。我已经尝试过了，但我无法突出显示给定的地图区域：stackoverflow.com/questions/30714264/…。我在问题中提到的链接确实可以选择突出显示地图区域。
jvectormap 还可以选择突出显示（不仅是区域，甚至是标记）。请参阅以下演示：jsfiddle.net/dqxccd7h/2。因此，欧文的答案应该被标记为一个好的答案。

【解决方案2】：

正如@Irvin Dominin 所说，jqvmap 没有实现标记，因此请尝试使用jVectormap，它们非常相似。

$(document).ready(function(){
	$('#vmap').vectorMap({
	    map: 'us_aea_en',
	    backgroundColor: '#00ff11',
	    color: '#D2D3D4',  //#F58025
	    hoverColor: '#754200',
	    selectedColor: '#F58025',
	    borderColor: '#FFFFFF',
	    enableZoom: false,
	    showTooltip: false,
	    regionsSelectable: true,

	    markersSelectable: true,
	    hoverOpacity: 0.7,
	    markersSelectable: true,
	    markerStyle: {
	        initial: {
	            fill: 'grey',
	            stroke: '#505050',
	                "fill-opacity": 1,
	                "stroke-width": 1,
	                "stroke-opacity": 1,
	            r: 5
	        },
	        hover: {
	            stroke: 'black',
	            "stroke-width": 2
	        },
	        selected: {
	            fill: 'blue'
	        },
	        selectedHover: {
	        }
	    },
	    markers: [
	              {latLng: [41.8781136,-87.6297982], name: "My marker name",style: {fill: 'yellow'}},
	         ],
    onRegionClick: function(element, code)
    {
    alert(code);
    }

	});
  
});

.jvectormap-label {
    position: absolute;
    display: none;
    border: solid 1px #CDCDCD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #292929;
    color: white;
    font-family: sans-serif, Verdana;
    font-size: smaller;
    padding: 3px;
}
.jvectormap-zoomin, .jvectormap-zoomout {
    position: absolute;
    left: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #292929;
    padding: 3px;
    color: white;
    width: 10px;
    height: 10px;
    cursor: pointer;
    line-height: 10px;
    text-align: center;
}

.jvectormap-zoomin {
top: 10px;
}
.jvectormap-zoomout {
top: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery-jvectormap-1.1.1.min.js"></script>
<script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery.jvectormap-us.js"></script>

<div id="vmap" style="width: 600px; height: 600px;"></div>

【讨论】：

非常感谢您的回复。我已经尝试过了，但我无法突出显示给定的地图区域：stackoverflow.com/questions/30714264/…。我在问题中提到的链接确实可以选择突出显示地图区域。