GIS足迹

用地图装点生活的每个角落。MSN:gisfoot@hotmail.com。QQ交流群1:42019368(已满);QQ交流群2:85857545。

« 10分钟学会Google Map API (一)Google Map API中文开发教程 »

10分钟学会Google Map API (二)

这里是一个基于GMap2和XML的小例子,数据存在XML文件中 ,这是最简单的模式,却相当地有用。

实例的网址是: http://sunjian100.googlepages.com/MapTest.html

另外补充一点,到目前为止,GoogleMap这套平台对于中文字符还不是支持的很好。

下面是脚本方面的例子:

 <script src="http://maps.google.com/maps?file=api&v=2&key=******" type="text/javascript"></script>

 <script type="text/javascript">
 //<![CDATA[
        var points = [];
        var markers = [];
        var infoWindowHtml = [];
        var sidebarHtml = "";

        var redCircleIcon = new GIcon();
        redCircleIcon.image = "RedCircle7x7.gif";
        redCircleIcon.iconSize = new GSize(7, 7);
        redCircleIcon.iconAnchor = new GPoint(3, 3);
        redCircleIcon.infoWindowAnchor = new GPoint(3, 3);

        function createBridgeMarker(ind, name, latitude, longitude) {
            var marker;
            points[ind] = new GLatLng(latitude, longitude);
            marker = new GMarker(points[ind], redCircleIcon);
            infoWindowHtml[ind] = "<a href=\"http://www.google.com/search?q=%22" + name + "%22\" target=\"_blank\">" + name + "</a>";
            GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(infoWindowHtml[ind]);
            });
            markers[ind] = marker;
            sidebarHtml += "<p><a href=\"javascript:void(0)\" onclick=\"markerSelected(" + ind + ")\">" + name + "</a></p>";
            return marker;
        }

        function markerSelected(ind) {
            markers[ind].openInfoWindowHtml(infoWindowHtml[ind]);
        }

 function onLoad() {
    // Creates a map and centers it on the Hot Metal Bridge in Pittsburgh.  
    if (GBrowserIsCompatible()) {
              var map = new GMap2(document.getElementById("map"));
              map.addControl(new GLargeMapControl());
              map.addControl(new GMapTypeControl());
              map.addControl(new GScaleControl());
              map.setCenter(new GLatLng(40.6413,-74.1428), 11, G_NORMAL_MAP);
 

              GDownloadUrl("Bridges.xml", function(data, responseCode) {
                 var xml = GXml.parse(data);
                 var bridges = xml.documentElement.getElementsByTagName("bridge");
                 for (var i = 0; i < bridges.length; i++) {
                    var name = bridges[i].getAttribute("name");
                    var latitude = parseFloat(bridges[i].getAttribute("latitude"));
                    var longitude = parseFloat(bridges[i].getAttribute("longitude"));
                    var marker = createBridgeMarker(i, name, latitude, longitude)
                    map.addOverlay(marker);
                 }
                 document.getElementById("sidebar").innerHTML = sidebarHtml;
              });
    }
 }

 //]]>
 </script>

(本文来源于网络,不代表www.gisfoot.com观点。如果无意之中侵犯了您的版权,请来信告知,本站将在3个工作日内删除。)

 

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Devo Build 80201  Theme By Bokezhuti.cn

ICP备案号正在申请。Copyright ©2009 gis足迹. All Rights Reserved.