`
dyllove98
  • 浏览: 1378762 次
  • 性别: Icon_minigender_1
  • 来自: 济南
博客专栏
73a48ce3-d397-3b94-9f5d-49eb2ab017ab
Eclipse Rcp/R...
浏览量：38201
4322ac12-0ba9-3ac3-a3cf-b2f587fdfd3f
项目管理checkList...
浏览量：78414
4fb6ad91-52a6-307a-9e4f-816b4a7ce416
哲理故事与管理之道
浏览量：131575
社区版块
存档分类
最新评论

Google Maps V3 在线地图的使用(一)：多个坐标之间连线

 
阅读更多

引入GoogleMap的js

1 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

创建几个坐标

//所有坐标
var locations = new Array(
    "31.953313,121.841581","31.15347,121.291706",
    "31.207516,121.412556","31.122909,121.458561",
    "31.118207,121.38715","31.041168,121.426289",
    "30.985262,121.301319","31.057934,121.305834");

 

加载地图的方法

function initialize() {
    var latlng = new google.maps.LatLng(31.253313, 121.241581);
    var myOptions = {
        zoom: 10,    //缩放级别
        center: latlng,        //坐标
        mapTypeId: google.maps.MapTypeId.ROADMAP    //类型:默认的普通二维图块
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    // 线条设置
    var polyOptions = {
      strokeColor: '#000000',    // 颜色
      strokeOpacity: 1.0,    // 透明度
      strokeWeight: 2    // 宽度
    }
    poly = new google.maps.Polyline(polyOptions);
    poly.setMap(map);    // 装载

    
    /* 循环标出所有坐标 */
    for(var i=0; i<locations.length; i++){
        var loc = locations[i].split(',');

        var path = poly.getPath();    //获取线条的坐标
        path.push(new google.maps.LatLng(loc[0], loc[1]));    //为线条添加标记坐标
        //生成标记图标
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(loc[0], loc[1]),
            map: map, 
            icon: "http://labs.google.com/ridefinder/images/mm_20_green.png"
        });
    }
    
}

 

全部代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> Locus </title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" >
        
        //所有坐标
        var locations = new Array(
            "31.953313,121.841581","31.15347,121.291706",
            "31.207516,121.412556","31.122909,121.458561",
            "31.118207,121.38715","31.041168,121.426289",
            "30.985262,121.301319","31.057934,121.305834");
                
        //地图
        var map;
        var marker;
        var poly;

                /* 加载地图 */
        function initialize() {
            var latlng = new google.maps.LatLng(31.253313, 121.241581);
            var myOptions = {
                zoom: 10,    //缩放级别
                center: latlng,        //坐标
                mapTypeId: google.maps.MapTypeId.ROADMAP    //类型:默认的普通二维图块
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            
            // 线条设置
            var polyOptions = {
              strokeColor: '#000000',    // 颜色
              strokeOpacity: 1.0,    // 透明度
              strokeWeight: 2    // 宽度
            }
            poly = new google.maps.Polyline(polyOptions);
            poly.setMap(map);    // 装载

            
            /* 循环标出所有坐标 */
            for(var i=0; i<locations.length; i++){
                var loc = locations[i].split(',');

                var path = poly.getPath();    //获取线条的坐标
                path.push(new google.maps.LatLng(loc[0], loc[1]));    //为线条添加标记坐标
                //生成标记图标
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(loc[0], loc[1]),
                    map: map, 
                    icon: "http://labs.google.com/ridefinder/images/mm_20_green.png"
                });
            }
            
        }

    </script>
</head>

<body onload="initialize()">
    <div id="map_canvas" style="width:1000px; height:600px;"></div>
</body>
</html>

 

分享到：
| Javascript基础与面向对象基础~第六讲 Jav ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics