如何在jVectorMap中添加标记
How to add Marker in jVectorMap?
我是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);
}
});
请帮帮我。
您使用的不是jVectormap
,而是jqvmap
。我认为它没有实现标记。
你可以切换到jVectorMap,它有点不同,但它有这样的标记:http://jvectormap.com/examples/markers-world/
简单演示:http://jsfiddle.net/IrvinDominin/96o28qnh/
作为@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>
相关文章:
- 如何使用javascript选择字符串的部分,添加html标记或删除部分
- 动态添加的标记不会'无法正确使用日期选择器
- 添加@javascript标记时,Cucumber中的HTTP身份验证失败
- 在 Javascript 生成的列表中,如何将自定义属性添加到 标记
- 如何在添加新标记和图层之前清除所有标记和图层的传单地图
- 如何在Phonegap中进行AJAX调用时添加加载屏幕
- 如何将多段线添加到标记阵列中
- 在添加新标记之前删除以前的标记
- 如何隐藏或删除Ngmap中动态添加的标记
- 在AngularJS模型中添加/删除标记
- 根据谷歌 Api v3 书/也用一个按钮添加一个标记
- 如何在加载前添加加载动画
- 通过添加自动标记库来了解 meteorjs 范围
- 在谷歌地图中添加新标记之前,先删除以前的标记
- 如何在网页加载之前添加加载页面
- 将数据属性添加到标记并使用 JQuery 检索它
- 将声音添加到标记数组 - 谷歌地图JavaScript
- 将侦听器添加到标记在循环中不起作用
- 在加载后添加预标记;t生效
- Google Maps API不会加载正确的中心位置,而是在最后添加的标记区域加载