在google地图上划线

最新推荐文章于 2018-01-15 09:44:32 发布

zxc123e

最新推荐文章于 2018-01-15 09:44:32 发布

阅读量1.1w

点赞数 2

分类专栏： javascript 文章标签： map stroke

本文链接：https://blog.csdn.net/zxc123e/article/details/18350647

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

通过 google.maps.Polyline 实现在Google地图上画线

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">    
    <title>google地图</title>    
    <script src="http://maps.google.com/maps/api/js?v=3.1&sensor=true"type="text/javascript"></script>  
    <script type="text/javascript">    
        function initialize() {    
            var myOptions = {    
                zoom: 16,    
                center: new google.maps.LatLng(29.82579, 121.56413),    
                mapTypeId: google.maps.MapTypeId.ROADMAP    
            };    
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);    
            // 这里填上轨迹的经纬坐标，或者ajax从后台读取    
        // 坐标做好是在路口的，不然画线不在路上。    
            var trackPoints = [    
				new google.maps.LatLng(29.83092, 121.55923),
                new google.maps.LatLng(29.83020, 121.55923),    
                new google.maps.LatLng(29.83015, 121.56059),    
                new google.maps.LatLng(29.82929, 121.56423),    
                new google.maps.LatLng(29.82276, 121.56407),    
                new google.maps.LatLng(29.82273, 121.56652),    
				new google.maps.LatLng(29.82234, 121.56652), 
				new google.maps.LatLng(29.82209, 121.56695),
            ];    
                
            var trackPath = new google.maps.Polyline({    
                path: trackPoints,    
                strokeColor: "#FF0000", // 线条颜色    
                strokeOpacity: 1.0, // 线条透明度    
                strokeWeight: 2 // 线条粗细    
            });    
    
            trackPath.setMap(map);    //画线
        }    
</script>    
</head>    
<body οnlοad="initialize()">    
    <form id="form1" runat="server">    
    <div id="map_canvas" style="width:1000px; height:700px;"></div>    
    </form>    
</body>    
</html>

谷歌地图被中国防火墙封杀，所以不用直接引用http://maps.googleapis.com/maps/api/js?sensor=false&language=en这域名下的谷歌地图api，而是改为http://maps.google.cn/maps/api/js?sensor=false这个地址，google.cn在国内的域名没有被封杀，可以使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>网站引用谷歌地图打不开解决办法:使用google.cn</title>  
</head>  
<body>  
<div id="map_canvas" class="map" style="height: 350px;width: 500px;"></div>  

<script type="text/javascript">  
  function renderGoogleMap() { //回调的方法  
            var myOptions = {        
                zoom: 15,        
                center: new google.maps.LatLng(29.82579, 121.56413),        
                mapTypeId: google.maps.MapTypeId.ROADMAP        
            };        
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);        
            // 这里填上轨迹的经纬坐标，或者ajax从后台读取        
        // 坐标做好是在路口的，不然画线不在路上。        
            var trackPoints = [        
                new google.maps.LatLng(29.83092, 121.55923),    
                new google.maps.LatLng(29.83020, 121.55923),        
                new google.maps.LatLng(29.83015, 121.56059),        
                new google.maps.LatLng(29.82929, 121.56423),        
                new google.maps.LatLng(29.82276, 121.56407),        
                new google.maps.LatLng(29.82273, 121.56652),        
                new google.maps.LatLng(29.82234, 121.56652),     
                new google.maps.LatLng(29.82209, 121.56695),    
            ];        
                    
            var trackPath = new google.maps.Polyline({        
                path: trackPoints,        
                strokeColor: "#FF0000", // 线条颜色        
                strokeOpacity: 1.0, // 线条透明度        
                strokeWeight: 2 // 线条粗细        
            });        
        
            trackPath.setMap(map);    //画线    
  }   
</script>  
<script type="text/javascript" src="http://maps.google.cn/maps/api/js?sensor=false&callback=renderGoogleMap"></script>  
</body>  
</html>