绘制两条折线或一组折线

时间:2013-05-23 09:28:55

标签: google-maps-api-3

抱歉我的英文。 我想知道是否可以在地图上绘制两条或更多条不同的折线。例如,从纽约到迈阿密的折线对象以及从旧金山到洛杉矶的其他对象。 任何人都可以举个例子。

1 个答案:

答案 0 :(得分:0)

是的,当然。

<!DOCTYPE html>
<html>
<head>
<title>Draw two polylines</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    function initialize() {
        var NYLatlng = new google.maps.LatLng(40.781321,-73.965855);
        var MiamiLatlng = new google.maps.LatLng(25.786908,-80.226002);
        var SFLatlng = new google.maps.LatLng(37.774514,-122.441311);
        var LALatlng = new google.maps.LatLng(34.041281,-118.240585);

        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 2,
            center: new google.maps.LatLng(0,0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var line1 = new google.maps.Polyline({
            path: [NYLatlng, MiamiLatlng],
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 1,
            map: map
        });

        var line2 = new google.maps.Polyline({
            path: [SFLatlng, LALatlng],
            strokeColor: "#0000FF",
            strokeOpacity: 1.0,
            strokeWeight: 1,
            map: map
        });

        // make the map zoomed in enough to see all the polylines
        var bounds = new google.maps.LatLngBounds();
        bounds.extend(NYLatlng);
        bounds.extend(MiamiLatlng);
        bounds.extend(SFLatlng);
        bounds.extend(LALatlng);
        map.fitBounds(bounds);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <div id="map"></div>
</body>
</html>