Showing a map with a path_HTML5 Data and Services Cookbook-QQ阅读女频仙侠网

上QQ阅读APP看书，第一时间看更新

Showing a map with a path

When displaying maps, sometimes we may want to show more than just locations. Besides markers, the other most common map overlays are paths and areas.

In this recipe, we're going to create a map showing a path and an area.

How to do it...

Let's write the HTML and JavaScript code.

Like in the Showing a map with a marked location recipe, we'll need to include the appropriate CSS and scripts. The following is an example HTML file:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Map example</title>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
        <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" />
        <![endif]-->
    </head>
    <body>
        <div id="map" style="height:480px; width:640px;"></div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
        <script type="text/javascript" src="example.js"></script>
    </body>
</html>

Then we can add our code to example.js:

var map = L.map('map').setView([52.513, -0.06], 14)

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution:'Copyright (C) OpenStreetMap.org',
    maxZoom:18
}).addTo(map);

var polyline = L.polyline([
    [52.519, -0.08],
    [52.513, -0.06],
    [52.52, -0.047]
]).addTo(map);


var polygon = L.polygon([
    [52.509, -0.08],
    [52.503, -0.06],
    [52.51, -0.047]
], {
    color:"#f5f",
    stroke: false,
    fillOpacity:0.5
}).addTo(map);

How it works...

We create our map using the L.map function and set the map's position using setView at the specified [latitude, longitude] array and the zoom level. We also add the standard OpenStreetMap tile layer.

First we create and add a standard polyline. As we don't specify any options, Leaflet uses reasonable defaults for colors, opacity, borders, and so on. The polyline constructor takes an array of [latitude, longitude] pairs and draws a line with vertices that go through them.

Afterwards, we create a slightly customized polygon. Like the polyline constructor, the polygon also takes an array of [latitude, longitude] pairs. Additionally, we customize the background color, remove the polygon's border, and specify the polygon's opacity to be 50 percent.

本周热推：

汇编语言程序设计 Go语言高级开发与实战快速入门与进阶：Creo 4·0全实例精讲 RISC-V体系结构编程与实践（第2版）Python硬件编程实战