<html>
  <head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key= your apikey =false"></script>
    
   <style type="text/css">
      html, body, #map{ height: 100%; margin: 0; }
    </style>
    <script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(parseFloat($("#longitude").val()),parseFloat($("#longitude").val())),
            zoom:  parseFloat($("#mapsize").val()),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),mapOptions);

        //refreshMap();
    }
    
    function refreshMap(){
        
        var map = new google.maps.Map($("#map").get(0),{
                center: new google.maps.LatLng(parseFloat($("#longitude").val()),parseFloat($("#longitude").val())),
                zoom:  4,
                mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        
        //定位标记框 
        var shape = {
                    coord: [20, 34 ,37, 34, 9, 34, 9, 2],
                    type: 'poly'
        };
        //标记 
        var cityarray = new Array;
        
        $('#citylist').children().each(function(i){
            
            var lng= $(this).attr('date_lng');
            var lat= $(this).attr('date_lat');
            var bbLatLng = new google.maps.LatLng(lat,lng);
            var bbMarker = new google.maps.Marker({
                icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + (i+1) + "|FF776B",
                position: bbLatLng,
                shape: shape,
                title: 'title',
                map: map
            });
            cityarray.push(bbLatLng);
            
        })
        //折线
        var leng = cityarray.length;
        if(leng > 0 ){
            var polyline = new google.maps.Polyline({
                path:cityarray ,
                strokeColor: "#ff0000",
                strokeOpacity: 0.5,
                strokeWeight: 3,
                geodesic: true
            });
            polyline.setMap(map);
            
            
            
            
            //计算距离和时间
            var directionsService     = new google.maps.DirectionsService();
            
            var origin         = cityarray[0];
            var destination    = cityarray[leng-1];
            doption = {
                    origin: 'paris',
                    destination: 'berlin',
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
            }
            function result_fun(response,status){
                // response 返回 所有对象的routes 所有对象必须加上索引 0 ,非常重要
                //var a = response.routes[0].legs[0].steps[1].duration.value;
                
                if(status == google.maps.DirectionsStatus.OK){
                    var a = response.routes[0].legs[0].duration.value;    //时间 秒
                    var b = response.routes[0].legs[0].distance.value;    //距离 米
                    
                    
                }else{
                    alert('fail');
                }
            }
            directionsService.route(doption,result_fun);
        }
    }
    
    
    google.maps.event.addDomListener(window, 'load', initialize);
    
    //添加城市
    $(function(){
        $('#addcity').on('click',function(){
            var address = $('#cityname').val();
            
            
            function geocode_result_handler(resutl,state){
                if(state != google.maps.GeocoderStatus.OK){
                    alert('没有该城市'+state);
                }else{
                    var lat = resutl[0].geometry.location.lat();
                    var lng    = resutl[0].geometry.location.lng();
                    
                    var html = '<input type="hide"  class="addresslist" date_lat="'+lat+'" date_lng="'+lng+'" />';
                    $('#citylist').append(html);
                    //刷新 必须放在此刷新,不然无法调用到新添加的 城市html 参数
                    refreshMap();
                }
            }
            //获取坐标
            var geocoder = new google.maps.Geocoder().geocode({'address': address}, geocode_result_handler);
        });
    })
    
    
    
    </script>
  </head>
  <body>
    <input   type="hidden" name="longitude" id="latitude" value="12.2607421875" />
    <input   type="hidden" name="latitude" id="longitude" value="45.767522962149904" />
    <input type="hidden" name="mapsize" id="mapsize" value="4" />
    
    <div id="citylist" style="display:none">
        
    </div>
    <input type="text" name="city" value="" id="cityname" />
    <a href="javascript:void(0)" id="addcity"> 添 加 </a>
    <br />
    
    
    <br />
    
    
    
    <div id="map"></div>
  </body>
</html>
具体效果可以复制以上代码运行下即可,
如果有其他想法的可以发送信息到我邮箱.
posted on 2013-11-22 18:07 L了个Pen 阅读(136) 评论(0) 收藏举报
刷新页面返回顶部
导航
