Gmaps.js添加/删除数组中的标记 [英] Gmaps.js add/remove markers from array
问题描述
我想在用户点击复选框时显示或隐藏一些标记。我使用的是 Gmaps.js ，负责的代码是：
//检查用户是否要显示兴趣点
$（＃poi）。click（function（）{
var poi_markers = [];
if（$（＃poi）。is（'：checked'））{
//获取兴趣点并将其显示在地图上
$ .ajax（{
type：POST，
url：/ajax/poi.php，
dataType：JSON，
cache： false，
success：function（data）{
$ .each（data，function（key，value）{
poi_marker = {
marker：{
lat： value.latitude，
ng：value.longitude，
图标：'/images/marker-sight.png'，
infoWindow：{
content：value .name
}
}
}
poi_markers.push（poi_marker）;
}）;
console.log（poi_markers）;
map.addMarkers（poi_markers）;
}
}）;
} else {
map.removeMarkers（poi_markers）;
}
}）;
示例JSON：
[{name：Biserica Neagra，latitude：45.640981，longitude：25.587723}]
在Firebug中，我得到这个错误：未捕获的异常：没有定义经度或纬度。。
我是什么 $ c> addMarkers（）函数将一组标记作为参数。但是，您正在使用 marker 属性为其提供一组对象。他们应该这样声明：
poi_marker = {
lat：value.latitude，
lng： value.longitude，
infoWindow：{
content：value.name
}
}
问题＃2
removeMarkers（）函数不带任何参数因为它会删除所有标记。它应该这样调用：
map.removeMarkers（）;
如何只添加/移除标记组
为了清楚起见，我想你会弄清楚如何做到这一点，我将省略Ajax部分，并且假设您在所有标记之后定义了这样的标记收集它们：
var realMarkers = {}，
gMarkers = {
bars：[
{lat：45.640981，lng：25.587723，infoWindow：{content：Irish Pub}}，
{lat：45.645911，lng：25.582753，infoWindow：{content：国王}}
]，
transportation：[
{lat：45.645981，lng：25.590723，infoWindow：{content：Subway}}，
{ lat：45.640981，lng：25.583723，infoWindow：{content：Train}}，
{lat：45.636981，lng：25.580723，infoWindow：{content：Airport}}
]
};
正如您所见，我使用了一个Object gMarkers g 代表 Gmaps.js ，因为这些标记与真实的Google地图标记不同，您需要使用这些标记。真正的标记将存储在 realMarkers 变量中。
由于Gmaps.js不提供添加/删除只有一些标记，我创建了2个函数，您可以添加到您的代码。
$ b
addMarkersOfType（）
/ *将poi类型作为参数* /
GMaps.prototype.addMarkersOfType = function（poi_type）{
//清除此类型的标记
realMarkers [poi_type] = [];
//为每个Gmaps标记
（var i = 0; i
var marker = map .addMarker（gMarkers [poi_type] [I]）;
//将其另存为实际标记
realMarkers [poi_type] .push（marker）;
code $ <$ $ p
removeMarkersOfType（） / *将poi类型作为参数* /
GMaps.prototype.removeMarkersOfType = function poi_type）{
//对于这种类型的每个实际标记
for（var i = 0; i< gMarkers [poi_type] .length; i ++）{
//移除标记
realMarkers [poi_type] [i] .setMap（null）;
}
//清除此类型的标记
realMarkers [poi_type] = [];
$ / code>
使用示例
<$ （$（this）.is（'：checked'））
map.addMarkersOfType（）函数（）{
$ （bars）;
else
map.removeMarkersOfType（bars）;
}）;
I would like to display or hide some markers when a user click on a checkbox. I'm using Gmaps.js and the code responsible for this is:
// Check if the user wants to display points of interest
$("#poi").click(function() {
var poi_markers = [];
if ($("#poi").is(':checked')) {
// Get points of interest and display them on the map
$.ajax({
type: "POST",
url: "/ajax/poi.php",
dataType: "JSON",
cache: false,
success: function(data) {
$.each(data, function(key, value) {
poi_marker = {
marker: {
lat: value.latitude,
lng: value.longitude,
icon: '/images/marker-sight.png',
infoWindow: {
content: value.name
}
}
}
poi_markers.push(poi_marker);
});
console.log(poi_markers);
map.addMarkers(poi_markers);
}
});
} else {
map.removeMarkers(poi_markers);
}
});
Sample JSON:
[{"name":"Biserica Neagra","latitude":"45.640981","longitude":"25.587723"}]
In Firebug I get this error: "uncaught exception: No latitude or longitude defined.".
What am I doing wrong?
Problem #1
The addMarkers() function takes an array of markers as a parameter. But you are giving it an array of objects with a marker property. They should be declared that way:
poi_marker = {
lat: value.latitude,
lng: value.longitude,
infoWindow: {
content: value.name
}
}
Problem #2
The removeMarkers() function does not take any parameter because it removes all markers. It should be called that way:
map.removeMarkers();
How to add/remove only groups of markers
For clarity, and since I think you'll figure out how to do this, I'll omit the Ajax part, and assume you have all your markers defined like this after collecting them:
var realMarkers = {},
gMarkers = {
bars: [
{lat:"45.640981",lng:"25.587723",infoWindow:{content:"Irish Pub"}},
{lat:"45.645911",lng:"25.582753",infoWindow:{content:"Beer King"}}
],
transportation: [
{lat:"45.645981",lng:"25.590723",infoWindow:{content:"Subway"}},
{lat:"45.640981",lng:"25.583723",infoWindow:{content:"Train"}},
{lat:"45.636981",lng:"25.580723",infoWindow:{content:"Airport"}}
]
};
As you can see, I used an Object gMarkers where the g stands for Gmaps.js, because these markers are different from real Google Maps markers, which you'll need for this. The real markers will be stored in the realMarkers variable.
Since Gmaps.js does not provide a way to add/remove only some markers, I created 2 functions, which you can add to your code.
addMarkersOfType()
/* Takes the poi type as a parameter */
GMaps.prototype.addMarkersOfType = function (poi_type) {
// clear markers of this type
realMarkers[poi_type]=[];
// for each Gmaps marker
for(var i=0; i<gMarkers[poi_type].length; i++){
// add the marker
var marker = map.addMarker(gMarkers[poi_type][i]);
// save it as real marker
realMarkers[poi_type].push(marker);
}
}
removeMarkersOfType()
/* Takes the poi type as a parameter */
GMaps.prototype.removeMarkersOfType = function (poi_type) {
// for each real marker of this type
for(var i=0; i<gMarkers[poi_type].length; i++){
// remove the marker
realMarkers[poi_type][i].setMap(null);
}
// clear markers of this type
realMarkers[poi_type]=[];
}
Example use
$("#bar_poi").click(function() {
if ($(this).is(':checked'))
map.addMarkersOfType("bars");
else
map.removeMarkersOfType("bars");
});
这篇关于Gmaps.js添加/删除数组中的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
