使用google地图绘画轨迹

最新推荐文章于 2023-08-22 11:18:06 发布

原创最新推荐文章于 2023-08-22 11:18:06 发布 · 3.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#谷歌地图 #绘画轨迹

google地图专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何利用谷歌地图API在地图上绘制轨迹，包括步骤解析和关键代码展示，帮助读者掌握这一实用技能。

<div id="map"style="position: absolute;width:99%;height:90%;top:50;overflow:hidden">
</div>

//导入js
<script type="text/javascript" src="http://maps.google.cn/maps/api/js?v=3.1&sensor=true"></script>  

        // rowInfo.gpsJson 是你的json 坐标
        var json=rowInfo.gpsJson;
        if(json != "" && json != null){
        var strs=JSON.parse(json);
        var trackPoints = [];  
        for(var i=0;i<strs.length;i++){
            var x=strs[i].x;
            var y=strs[i].y;
            trackPoints[i]=new google.maps.LatLng(x,y);
        }      
        trackPoints[strs.length]=new google.maps.LatLng(strs[0].x,strs[0].y);
            var myOptions = {  
                zoom: 18,  
                center: new google.maps.LatLng(strs[0].x,strs[0].y),  
                mapTypeId: google.maps.MapTypeId.SATELLITE  
            };  
            var map = new google.maps.Map(document.getElementById("map"), myOptions);  
            // 这里填上轨迹的经纬坐标，或者ajax从后台读取  
        // 坐标做好是在路口的，不然画线不在路上。  
            var trackPath = new google.maps.Polyline({  
                path: trackPoints,  
                strokeColor: "blue", // 线条颜色  
                strokeOpacity: 1.0, // 线条透明度  
                strokeWeight: 2 // 线条粗细  
            });  

            trackPath.setMap(map);  
        }else{
            $.messager.show({title:'我的消息',msg:"圈地信息不正确无法展示!",timeout:5000,showType:'slide'});
             var myOptions = {  
                    zoom: 14,  
                    center: new google.maps.LatLng(22.5428878201,114.0592202861)
                };  
                var map = new google.maps.Map(document.getElementById("map"), myOptions);  
        }