通用方式实现Map

ChatGpt

实现展示地图并在地图上提供操作选项的技术栈可以包括：

Web开发技术：HTML、CSS、JavaScript
地图API：如Google Maps API、Mapbox API、Leaflet等
前端框架：如React、Vue.js、Angular等
后端技术：如Node.js、Django、Flask等（如果需要与后端交互）
数据库：如MySQL、MongoDB等（如果需要存储地图数据）
移动开发技术：如React Native、Flutter（如果需要在移动端展示地图）

通用方式实现地图通常涉及使用地图API来获取地图数据，并在网页或应用程序中显示地图。
常见的地图API包括Google Maps API、Mapbox API和Leaflet等。

以下是一个使用Leaflet库实现地图的简单示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Simple Leaflet Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        #map {
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);
        
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
    </script>
</body>
</html>

在上面的代码中，我们使用Leaflet库创建了一个简单的地图，并加载了OpenStreetMap的瓦片图层。

Google Maps API、Mapbox API和Leaflet都是在线地图服务，通常需要连接互联网才能加载地图数据。但是，它们也提供了一些离线功能或解决方案，可以在没有网络连接的情况下使用地图。

Google Maps API： Google Maps API本身并不直接支持离线功能，但可以通过一些第三方工具或库实现离线地图的功能，比如Google Maps SDK for Android和Google Maps SDK for iOS可以缓存部分地图数据供离线使用。
Mapbox API： Mapbox提供了Mapbox SDK来支持离线地图功能。开发者可以使用Mapbox SDK下载地图数据并存储在本地，然后在没有网络连接的情况下使用这些离线地图数据。
Leaflet： Leaflet本身并不直接支持离线功能，但可以通过一些插件来实现离线地图功能，比如Leaflet.TileLayer.Cordova或Leaflet.Offline可以帮助开发者实现离线地图功能。

Leaflet

Leaflet官方网站
Leaflet API reference
Leaflet Tutorials
an open-source JavaScript library for mobile-friendly interactive maps
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need.

create a map in the 'map' div, add tiles of our choice, and then add a marker with some text in a popup

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
//marker
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS popup.<br> Easily customizable.')
    .openPopup();
//circle
var circle = L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(map);
//polygon
var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);
//Popup
//marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
//Popup only
var popup = L.popup()
    .setLatLng([51.513, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);

//Event
// function onMapClick(e) {
//     alert("You clicked the map at " + e.latlng);
// }
var popup = L.popup();
function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(map);
}
map.on('click', onMapClick);

Custom Icon

prepare images:
the white area in the images is actually transparent.
Use L.icon

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

Use Class

var LeafIcon = L.Icon.extend({
    options: {
        shadowUrl: 'leaf-shadow.png',
        iconSize:     [38, 95],
        shadowSize:   [50, 64],
        iconAnchor:   [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor:  [-3, -76]
    }
});

var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
    redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
    orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});


L.icon = function (options) {
    return new L.Icon(options);
};

附录

map-leaflet@1.9.4.html

<!DOCTYPE html>
<html>

<head>
    <title>Simple Leaflet Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <style>
        #map {
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);
        //marker
        L.marker([51.5, -0.09]).addTo(map)
            .bindPopup('A pretty CSS popup.<br> Easily customizable.')
            .openPopup();
        //circle
        var circle = L.circle([51.508, -0.11], {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius: 500
        }).addTo(map);
        //polygon
        var polygon = L.polygon([
            [51.509, -0.08],
            [51.503, -0.06],
            [51.51, -0.047]
        ]).addTo(map);
        //Popup
        //marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
        circle.bindPopup("I am a circle.");
        polygon.bindPopup("I am a polygon.");
        //Popup only
        var popup = L.popup()
            .setLatLng([51.513, -0.09])
            .setContent("I am a standalone popup.")
            .openOn(map);

        //Event
        // function onMapClick(e) {
        //     alert("You clicked the map at " + e.latlng);
        // }
        var popup = L.popup();
        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(map);
        }
        map.on('click', onMapClick);


    </script>
</body>

</html>

posted @ 2024-02-20 10:37 Theseus‘Ship 阅读(13) 评论(0) 编辑收藏举报

刷新页面返回顶部