好玩的棋牌百人牛牛

書名： HTML5 Data and Services Cookbook
作者名： Gorgi Kosev Mite Mitreski
本章字數： 255字
更新時間： 2021-08-06 16:49:59

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"  />
        <!--[if lte IE 8]>
        <link rel="stylesheet"  />
        <![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.

官术网_书友最值得收藏!

HTML5 Data and Services Cookbook

Showing a map with a path

How to do it...

How it works...