Jvectormap 只在预选区域放置一个新标记
Jvectormap place only one new marker on a pre selected region
我目前正在编写一个脚本,供用户 select 在地图上为旅游网络应用找到一个地方,我也是一个新手,对 javascript 没有任何应用知识,我正在 python -flask 上开发 webapp,并且由于地图在 JS 上工作,我目前卡住了。
我需要的是,在用户 select 在地图上找到一个国家之后,他们应该在那个 selected 国家内放置一个标记,我在 jvectormap 网页上查看了他在标记上的示例并且正在解决这个问题,但是那个例子允许多个标记,而我只需要放置一个标记,在国家 selected 之后,现在我可以让国家 selected 但是当你点击那个国家时,一个标记被放置,所以我宁愿需要如果该区域是 selected,则允许标记,有 onRegionSelected 属性,但我一直无法弄清楚如何使用该函数的 isSelected 属性,非常感谢您对此的帮助。
此外,在完成此操作后,我需要将此标记的坐标传递给数据库中的表单,所以如果可能的话,你能帮我解决这个问题吗?我正在使用 wtforms,但我不知道如何从 javascript 访问变量,我需要标记中的值通过表单
将它们存储在数据库中
提前致谢!
代码:
<div id="world-map" style="width: 800px; height: 600px"></div>
<script>
$(function(){
var map,
markerIndex = 0,
markersCoords = {};
map = new jvm.Map({
map: 'world_mill',
markerStyle: {
initial: {
fill: 'red'
}
},
hoverColor: '#FCEF06',
hover: {
stroke: 'black',
"stroke-width": 2,
fill:'#FCEF06'
},
regionsSelectable: true,
regionsSelectableOne: true,
regionStyle: {
fill:'black',
selected: {
fill: 'red'
}
},
container: $('#world-map'),
onMarkerTipShow: function(e, label, code){
map.tip.text(markersCoords[code].lat.toFixed(2)+', '+markersCoords[code].lng.toFixed(2));
},
onMarkerClick: function(e, code){
map.removeMarkers([code]);
map.tip.hide();
}
});
map.container.click(function(e){
var latLng = map.pointToLatLng(
e.pageX - map.container.offset().left,
e.pageY - map.container.offset().top
),
targetCls = $(e.target).attr('class');
if (latLng && (!targetCls || (targetCls && $(e.target).attr('class').indexOf('jvectormap-marker') === -1))) {
markersCoords[markerIndex] = latLng;
map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
markerIndex += 1;
}
});
});
</script>
您不需要跟踪 markerIndex
因为您只有一个标记。
此外,我相信您甚至不需要强制将标记放置在已经 select 的区域内,因为您可以简单地 select 一个新区域并将标记放置在其中同时-取决于您。
无论如何,如果您绝对需要此功能,您可以简单地存储以前 selected 区域并检查新 selection 与旧代码的对比。
在我的演示中,标记只能放置在区域内,不能放置在海面上。
但是:jVectorMap 的原始地图不包括毛里求斯、塞舌尔等一些小国家。它们太小了,你需要放大很多。
这个问题的首选解决方案是在它们的位置放置额外的标记。
另一种解决方案可能是切换到完整的国家/地区世界地图。这是一个例子:jvectormap-all-countries.
$(document).ready(function() {
var selectedRegion = "";
var map = new jvm.Map({
map: "world_mill_en",
container: $('#map'),
zoomOnScroll: true,
regionsSelectable: true,
regionsSelectableOne: true,
backgroundColor: "aliceblue",
regionStyle: {fill:'black', selected: {fill: 'red'}},
markerStyle: {initial: {fill: 'yellow'}},
hoverColor: '#FCEF06',
hover: {stroke: 'black', "stroke-width": 2, fill:'#FCEF06'},
markers: [],
series: {markers: [{attribute: 'fill', scale: {}, values: []}]},
onMarkerClick: function(e, code) {
map.tip.hide();
},
onMarkerTipShow: function(e, label, code) {
var coords = map.markers[code].config.latLng;
map.tip.text(coords[0].toFixed(2) + ', ' + coords[1].toFixed(2));
}
});
map.container.on("click", function(e){
var name = "MARKER",
latLng = map.pointToLatLng(
e.pageX - map.container.offset().left,
e.pageY - map.container.offset().top
),
targetCls = $(e.target).attr('class');
if(latLng) {
var currentRegion = map.getSelectedRegions()[0];
var isRegion = targetCls && ~targetCls.indexOf("jvectormap-region");
var isMarker = targetCls && ~targetCls.indexOf("jvectormap-marker");
if (isRegion) {
var isSameRegion = selectedRegion === currentRegion;
selectedRegion = currentRegion;
map.removeAllMarkers();
map.addMarker(name, {latLng: [latLng.lat, latLng.lng]});
}
}
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>
我目前正在编写一个脚本,供用户 select 在地图上为旅游网络应用找到一个地方,我也是一个新手,对 javascript 没有任何应用知识,我正在 python -flask 上开发 webapp,并且由于地图在 JS 上工作,我目前卡住了。
我需要的是,在用户 select 在地图上找到一个国家之后,他们应该在那个 selected 国家内放置一个标记,我在 jvectormap 网页上查看了他在标记上的示例并且正在解决这个问题,但是那个例子允许多个标记,而我只需要放置一个标记,在国家 selected 之后,现在我可以让国家 selected 但是当你点击那个国家时,一个标记被放置,所以我宁愿需要如果该区域是 selected,则允许标记,有 onRegionSelected 属性,但我一直无法弄清楚如何使用该函数的 isSelected 属性,非常感谢您对此的帮助。
此外,在完成此操作后,我需要将此标记的坐标传递给数据库中的表单,所以如果可能的话,你能帮我解决这个问题吗?我正在使用 wtforms,但我不知道如何从 javascript 访问变量,我需要标记中的值通过表单
将它们存储在数据库中提前致谢!
代码:
<div id="world-map" style="width: 800px; height: 600px"></div>
<script>
$(function(){
var map,
markerIndex = 0,
markersCoords = {};
map = new jvm.Map({
map: 'world_mill',
markerStyle: {
initial: {
fill: 'red'
}
},
hoverColor: '#FCEF06',
hover: {
stroke: 'black',
"stroke-width": 2,
fill:'#FCEF06'
},
regionsSelectable: true,
regionsSelectableOne: true,
regionStyle: {
fill:'black',
selected: {
fill: 'red'
}
},
container: $('#world-map'),
onMarkerTipShow: function(e, label, code){
map.tip.text(markersCoords[code].lat.toFixed(2)+', '+markersCoords[code].lng.toFixed(2));
},
onMarkerClick: function(e, code){
map.removeMarkers([code]);
map.tip.hide();
}
});
map.container.click(function(e){
var latLng = map.pointToLatLng(
e.pageX - map.container.offset().left,
e.pageY - map.container.offset().top
),
targetCls = $(e.target).attr('class');
if (latLng && (!targetCls || (targetCls && $(e.target).attr('class').indexOf('jvectormap-marker') === -1))) {
markersCoords[markerIndex] = latLng;
map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
markerIndex += 1;
}
});
});
</script>
您不需要跟踪 markerIndex
因为您只有一个标记。
此外,我相信您甚至不需要强制将标记放置在已经 select 的区域内,因为您可以简单地 select 一个新区域并将标记放置在其中同时-取决于您。 无论如何,如果您绝对需要此功能,您可以简单地存储以前 selected 区域并检查新 selection 与旧代码的对比。
在我的演示中,标记只能放置在区域内,不能放置在海面上。
但是:jVectorMap 的原始地图不包括毛里求斯、塞舌尔等一些小国家。它们太小了,你需要放大很多。 这个问题的首选解决方案是在它们的位置放置额外的标记。
另一种解决方案可能是切换到完整的国家/地区世界地图。这是一个例子:jvectormap-all-countries.
$(document).ready(function() {
var selectedRegion = "";
var map = new jvm.Map({
map: "world_mill_en",
container: $('#map'),
zoomOnScroll: true,
regionsSelectable: true,
regionsSelectableOne: true,
backgroundColor: "aliceblue",
regionStyle: {fill:'black', selected: {fill: 'red'}},
markerStyle: {initial: {fill: 'yellow'}},
hoverColor: '#FCEF06',
hover: {stroke: 'black', "stroke-width": 2, fill:'#FCEF06'},
markers: [],
series: {markers: [{attribute: 'fill', scale: {}, values: []}]},
onMarkerClick: function(e, code) {
map.tip.hide();
},
onMarkerTipShow: function(e, label, code) {
var coords = map.markers[code].config.latLng;
map.tip.text(coords[0].toFixed(2) + ', ' + coords[1].toFixed(2));
}
});
map.container.on("click", function(e){
var name = "MARKER",
latLng = map.pointToLatLng(
e.pageX - map.container.offset().left,
e.pageY - map.container.offset().top
),
targetCls = $(e.target).attr('class');
if(latLng) {
var currentRegion = map.getSelectedRegions()[0];
var isRegion = targetCls && ~targetCls.indexOf("jvectormap-region");
var isMarker = targetCls && ~targetCls.indexOf("jvectormap-marker");
if (isRegion) {
var isSameRegion = selectedRegion === currentRegion;
selectedRegion = currentRegion;
map.removeAllMarkers();
map.addMarker(name, {latLng: [latLng.lat, latLng.lng]});
}
}
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>