12.4.3 添加标志

要强调地图上的一个地点,可以添加一个红色的按钮标志,如图12-3所示。这些标志是表示我们的公司地点或者地图上的相关的一个地点的一种很好的方法。要提供关于标志的更多信息,还可以使用HTML添加一个弹出提示框(如图12-3所示)。GoMap使得添加这些细节变得很容易。

GoMap提供了几种方法来添加一个标志:第一种方法可以同时创建一个标志和一个地图。或者,可以向页面添加一个地图,然后向地图添加一个或多个标志。第二种方法允许你动态地控制一个标志,例如,当访问者单击页面上的一个按钮的时候,添加一个标志。第一种方法涉及调用goMap()函数并将带有一个markers项的对象直接量传递给它。下面是一个例子:


$('#map').goMap({

markers:[

{

latitude:45.53940,

longitude:-122.59025,

title:'Marker 1’

}]

});//end goMap


markers属性在地图上创建了一个或多个标志。这是一个数组,它类似于一个杂货店列表,其中包含了一个或多个项(参见2.8节)。要创建一个名为arrayItems的、包含3个字符串的数组,可以这样编写:


var arrayItems=['item1’,'item2’,'item3’];


markers项也是类似这样的一个数组,但是,它不包含字符串,而包含了对象直接量(参见4.8.3节)。换句话说,一个marker是一个对象直接量:


{

latitude:45.53940,

longitude:-122.59025,

title:'Marker 1’

}


这段代码表示一个标志,并且,实际上它有一个latitude、longitude和标志的title组成(title是一个文本,当访问者的鼠标光标移动到标志上的时候,它会显示出来)。

通过向数组添加额外的对象直接量,你可以向地图添加更多的标志。例如,下面是添加3个标志的代码:


$('#map').goMap({

markers:[

{

latitude:45.53940,

longitude:-122.59025,

title:'Marker 1’

},{

latitude:45.53821,

longitude:-122.59796,

title:'Marker 2’

},{

latitude:45.53936,

longitude:-122.58159,

title:'Marker 3’

}

]

});//end goMap


当你以这种方式创建一个地图的时候,仍然可以将上面所介绍的同样的选项传递给goMap()函数。例如,要创建一张路线图,它带有一个标志、缩放到15级以及一个比例尺标志,你可以编写如下的代码(注意,这些选项位于markers数组之外):


$('#map').goMap({

markers:[

{

latitude:45.53940,

longitude:-122.59025,

title:'Marker 1’

}],

zoom:15,

maptype:'ROADMAP',

scaleControl:true

});//end goMap


也可以使用一个地址来设置一个标志,而不是使用纬度和经度,如下所示:


$('#map').goMap({

markers:[

{

address:’2200 NE 71st Ave Portland, OR, USA',

title:'Marker 1’

}

],

zoom:15,

});//end goMap


我们也可以在创建了地图之后添加标志。如果你不想要标志位于地图的中心,这一技术很方便:例如,你可能想要一张公园的地图,并且使用标志标记出公园中感兴趣的位置。你想要让公园位于地图的中心,但是,不想让标志位于中心(当你像12.4.3节所述的那样同时创建标志和地图的时候,可能会发生这种事情)。你也可能想要动态地添加标志,可能是作为对用户单击之类的事情的响应。例如,以公园地图为例,你可能想要一个按钮显示“Show me all the slides in the park”。单击这个按钮,将会使得标记出现,突出显示公园内的所有滑梯。

按照这种方式,你首先添加一幅地图,然后,调用GoMap插件的一个特殊函数createMarker()。例如,要创建一个地图然后添加一个标志,你可以像下面这样编写代码:


$('#map').goMap(

{

latitude:45,

longitude:-122,

zoom:15

});//end goMap

$.goMap.createMarker({

latitude:45.53940,

longitude:-122.59025,

title:'Marker 1’

});


注意,在这种方式中,GoMap插件没有添加给一个jQuery选择以添加标志。换句话说,它是$.goMap.createMarker(),而不是$('#map').goMap.createMarker()。像这样,我们每次只能添加一个标志,因此,需要添加多个标志的时候,需要多次调用这个函数。一种好的办法是,将你的所有标志定义为一个数组,然后使用jQuery的$.each()函数遍历该数组,并且应用createMarker()函数。示例如下:


var markers=[

{

latitude:45.53940,

longitude:-122.59025,

title:'Marker 1’

},{

latitude:45.53821,

longitude:-122.59796,

title:'Marker 2’

},{

latitude:45.53936,

longitude:-122.58159,

title:'Marker 3’

}]

$('#map').goMap(

{

latitude:45,

longitude:-122,

zoom:15

});//end goMap

$.each(markers, function(i, marker){

$.goMap.createMarker(marker);

});//end each


此外,你可能想要删除标志(例如,有一个显示Hide Markers的按钮)。GoMap有一个clearMarkers()函数。你可以像createMarker()函数一样使用它,也就是说,将它附加到jQuery对象而不是一个选择,例如:


$.goMap.clearMarkers();


因此,假设页面上有一个ID为removeMarkers的按钮。可以给它附加一个click处理程序,它将会从页面删除标志:


$('#removeMarkers').click(function(){

$.goMap.clearMarkers();

});//end click


如果你只是想要删除一个特殊的标志,需要首先给标志添加一个ID,然后,调用GoMap的removeMarker函数。例如,下面的代码创建了一个新的地图(第1~13行),然后,给带有ID remove的一个页面元素添加一个click事件。


1$('#map').goMap({

2 markers:[

3{

4 latitude:45.53940,

5 longitude:-122.59025,

6 title:'Marker 1’,

7 id:'marker1’

8}

9],

10 zoom:15,

11 maptype:'ROADMAP',

12 scaleControl:true

13});//end goMap

14$('#remove').click(function(){

15$.goMap.removeMarker('marker1');

16});


创建标志过程中重要的部分是第7行,即id:'marker1’,它给该标志分配了一个名称。一旦一个标志有了ID,我们就可以识别它,并使用removeMarker函数删除它(第15行)。GoMap还提供了一个showHideMarker()函数,它将一个标志在可见和不可见之间切换。例如,你可以重新编写第14~16行的代码,以便每次单击该页面元素的时候,都会隐藏或显示特定的标志,例如:


$('#remove').click(function(){

$.goMap.showHideMarker('marker1');

});