定制地图：
你可以使用自定义的标记和阴影。有两个工具可以帮助你创建这些图标—— 地图标记 和 阴影。你也可以使用HTML和CSS来定义气球提示。
加入多个标记并分组
我们可以标记多个地点，并可以把它们根据我们的需要分组。这样一来，我们可以通过不同的标记图标来显示地点的不同属性，比如：酒店，车站等。要做到这样，我们只需要使用一个XML文件，一个简单的XML文件如下所示：
01.<markers>
02.<marker
03. name="标题"
04. label="这是一个标签"
05. desc="气球提示的描述"
06. lat="37.97167" lng="23.72581"
07. type="标签的种类，如 Bridge"
08. address="地址信息"
09. icona="图标"
10./>
11.</markers> |
你可以在这个XML文件中加入多个地点信息。有一件事你需要小心的是，当出现一一些特定字符时（比如单引号，双引号，“#@$<>”等），你需要使用HTML的转义。
使用这XML的脚本如下：
| 1.<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/release/src/labeledmarker.js" type="text/javascript"></script> |
当然，你需要设置一些参数：
01.var iconRed = new GIcon();
02.iconRed.image = ‘../img/marker-red.png‘;
03.iconRed.shadow = ‘‘;
04.iconRed.iconSize = new GSize(32, 32);
05.iconRed.shadowSize = new GSize(22, 20);
06.iconRed.iconAnchor = new GPoint(16, 16);
07.iconRed.infoWindowAnchor = new GPoint(5, 1);
08.var customIcons = [];
09.
10.customIcons["ancient"] = iconRed;
11.var markerGroups = { "ancient": []}; |
上面，我们给customIcons 的“ancient”属性设置成了iconRed ，于是我们应该在我们的XML文件中使用类型(ancient) ，如果我们把这个XML文件命名为： markers.xml，那么，我们的代码如下：
01.GDownloadUrl("markers.xml", function(data) { //We tell Google Maps to load our file
02. var xml = GXml.parse(data);
03. var markers = xml.documentElement.getElementsByTagName("marker"); //and read markers
04. for (var i = 0; i < markers.length; i++) {
05. var name = markers[i].getAttribute("name"); //From here down we assign variables.
06. var label = markers[i].getAttribute("label");
07. var desc = markers[i].getAttribute("desc");
08. var address = markers[i].getAttribute("address");
09. var type = markers[i].getAttribute("type");
10. var icona = markers[i].getAttribute("icona");
11. var point = new GlatLng(parseFloat(markers[i].getAttribute("lat")), //and we set the lat-long
12. parseFloat(markers[i].getAttribute("lng")));
13. var marker = createMarker(point, name, label, desc, address, type, icona);
14. map.addOverlay(marker);
15. }
16. });
17.}
18.}
19.
20.function createMarker(point, name, label, desc, address, type, icona) {
21. var marker = new LabeledMarker(point, {icon: customIcons[type], labelText: label, labelOffset: new GSize(-6, -8)})
22.}; |
要分组标记，你需要下面的代码：
1. markerGroups[type].push(marker);
2. var html = "<img src=" + icona + " height=150 border=0 /><br><br><span><b>"+ name + "</b><br/>" +
3. desc + "<br/><b>Address:</b> " + address + "<br/><br/><span>";
4. GEvent.addListener(marker, ‘click‘, function() {
5. marker.openInfoWindowHtml(html);
6. });
7. return marker;
8.} |
要使用不同的图标，你可以使用相同的方法。
01.var iconRed = new GIcon();
02.iconRed.image = ‘../img/marker-red.png‘;
03.iconRed.shadow = ‘‘;
04.iconRed.iconSize = new GSize(32, 32);
05.iconRed.shadowSize = new GSize(22, 20);
06.iconRed.iconAnchor = new GPoint(16, 16);
07.iconRed.infoWindowAnchor = new GPoint(5, 1);
08.
09.var iconGreen = new GIcon();
10.iconGreen.image = ‘../img/marker-green.png‘;
11.iconGreen.shadow = ‘‘;
12.iconGreen.iconSize = new GSize(32, 32);
13.iconGreen.shadowSize = new GSize(22, 20);
14.iconGreen.iconAnchor = new GPoint(16, 16);
15.iconGreen.infoWindowAnchor = new GPoint(5, 1);
16.
17.var iconBrown = new GIcon();
18.iconBrown.image = ‘../img/marker-brown.png‘;
19.iconBrown.shadow = ‘‘;
20.iconBrown.iconSize = new GSize(32, 32);
21.iconBrown.shadowSize = new GSize(22, 20);
22.iconBrown.iconAnchor = new GPoint(16, 16);
23.iconBrown.infoWindowAnchor = new GPoint(5, 1);
24.
25.var customIcons = [];
26.
27.customIcons["hotel"] = iconRed;
28.customIcons["bridge"] = iconGreen;
29.customIcons["hill"] = iconBrown;
30.var markerGroups = { "hotel": [], "bridge": [], "hill": []}; |
所以，如果我们在XML 文件中设置了不同的种类，如：hotel，bridge 和 hill，我们也应该需要不同的颜色和图标。
.
分页: [1] [2] [3] [4]
： 219854
：714658643 MSN：
chenlh@dns110.com Email： support@dns110.com