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

最新推荐文章于 2021-08-03 21:46:07 发布

dyllove90

最新推荐文章于 2021-08-03 21:46:07 发布

阅读量692

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/dyllove90/article/details/84434776

版权

引入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>

dyllove90

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google Maps V3 在线地图的使用(一)：多个坐标之间连线

引入GoogleMap的js1 &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;创建几个坐标//所有坐标var locations = new Array( "31.953313,121.841...
复制链接

扫一扫