二维地图展示以及添加图标、文本、连线、弹窗等功能实现

作者: 日不落000 | 来源:发表于2021-07-07 18:06 被阅读0次

二维地图离线展示功能
二维地图展示以及添加图标、文本、连线、弹窗等功能实现
高德地图当前位置图标旋转功能实现
Django 搭建博客项目（6）-博客分类的展示
cesium 添加图片偏移问题+蒙版+点击自定义弹窗跟随移动
企业网站建设中，如何给网站添加遮盖层弹窗？
label 文本中添加图标
百度地图API图标、文本、图例与连线
arcgis api for js入门开发系列三地图工具栏
一些异常及后续规避

使用第三方库：

leaflet，openlayers，mapbox，baidu；

可能mapbox更优秀一些；

leaflet 示例：

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 远程资源 -->
     <link rel="stylesheet" href="https://cdn.bootcss.com/leaflet/1.2.0/leaflet.css" /> 
     <script src="https://cdn.bootcss.com/leaflet/1.2.0/leaflet.js"></script>
    <!-- 本地资源 -->
    <!-- 
<link rel="stylesheet" href="../docs/lib/leaflet.css" tppabs="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="../docs/lib/leaflet.js" tppabs="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
-->

</head>
<body>
    <div id="mapid" style="width: 600px; height: 400px"></div>


    <script>

        var mymap = L.map('mapid').setView([31.505, 113.09], 11);

    L.tileLayer("http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}").addTo(mymap);


        L.marker([31.5, 113.09]).addTo(mymap)
            .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

        L.circle([31.508, 113.11], 500, {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5
        }).addTo(mymap).bindPopup("I am a circle.");

        // 线
        var latlngs =[[31.509, 113.08],[32.509, 113.08],[32.509, 115.08]]
        var polyline = L.polyline(latlngs, {color: 'red'}).addTo(mymap);

        L.polygon([
            [31.509, 113.08],
            [31.503, 113.06],
            [31.51, 113.047]
        ]).addTo(mymap).bindPopup("I am a polygon.");


        var popup = L.popup();

        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(mymap);
        }

        mymap.on('click', onMapClick);

    </script>
</body>
</html>