在信息系统中根据坐标，调用并展示ＧＯＯＧＬＥ地图！！

公告

View Post

最近在做信息系统，需要根据坐标在地图上展示，做点记录，哈哈，

这东西看起来不错，有点不好的是ＩＥ6居然不支持／

首先在ＡＳＰＸ页面中的ＨＥＡＤ中加入以下标记

View Code

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

增加以下JS代码

View Code

<script type="text/javascript">
        
        ///经纬度换成十进制数
        var DegreeToDecimalDegree = function (sJWZB) {
            var aDSM = sJWZB.split(".");
            var dblDegree = parseFloat(aDSM[0]);

            dblDegree += parseFloat(aDSM[1].substr(0, 2) / 60);
            dblDegree += parseFloat(aDSM[1].substr(3) / 3600);
            return dblDegree;
        }

        function initialize() {
            var myLatLng = new google.maps.LatLng(DegreeToDecimalDegree("31.3230"), DegreeToDecimalDegree("115.2900"));
            //var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
            var myOptions = { zoom: 13, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP };
            var bermudaTriangle;
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                        //具体的坐标就隐了，不显示,有一点需要注意的是,调用时以纬度坐标,经度坐标,不像中国的习惯是以经度坐标排在前面.　
            var triangleCoords = [
                            new google.maps.LatLng(DegreeToDecimalDegree("31.XXXX"), DegreeToDecimalDegree("115.XXXX")),
                            new google.maps.LatLng(DegreeToDecimalDegree("31.XXXX"), DegreeToDecimalDegree("115.XXXX")),
                            new google.maps.LatLng(DegreeToDecimalDegree("31.XXXX"), DegreeToDecimalDegree("115.XXXX")),
                            new google.maps.LatLng(DegreeToDecimalDegree("31.XXXX"), DegreeToDecimalDegree("115.XXXX"))
                       // new google.maps.LatLng(25.774252, -80.190262), new google.maps.LatLng(18.466465, -66.118292), new google.maps.LatLng(32.321384, -64.75737), new google.maps.LatLng(25.774252, -80.190262) 
            ];
            // Construct the polygon   
            // Note that we don't specify an array or arrays, but instead just   
            // a simple array of LatLngs in the paths property   
            bermudaTriangle = new google.maps.Polygon({
                paths: triangleCoords,
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.35
            });
            bermudaTriangle.setMap(map);
        }

        //alert(DegreeToDecimalDegree("117.5500"));

    </script>

并增加以下代码　

<body onload="initialize()">
    <form id="form1" runat="server">
    <div id="map_canvas">
    </div>
    </form>
</body>

，具体相关的开发，详见ＧＯＯＧＬＥ地图的ＡＰＩ帮助

http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/overlays.html

posted on 2011-07-26 10:14 考拉田九阅读(506) 评论(0) 收藏举报

刷新页面返回顶部