最开始用的 jvectormap 可以使用全世界地图或者省市地图,但是界面不太好看就没用了。然后使用Google Mpas 的分享足迹功能,但是国内被墙了,部分靓仔体验不好,就在想用国内地图代替。看了几个教程后选择百度地图来完成。

百度AK获取

百度地图开放平台注册一个开发者身份认证(基本秒过)

创建一个新的应用,应用名称随意填写,应用类型选择浏览器端,白名单填写你的域名或者ip,测试阶段可以用*代替,创建成功会得到一个访问AK。

源码

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的AK">
    </script>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript">
        var map = new BMapGL.Map("container");// 创建地图实例 
        var point = new BMapGL.Point(105.59123, 30.548022);// 创建点坐标,打开页面中心点
        map.centerAndZoom(point, 6);// 初始化地图,设置中心点坐标和地图级别 
        map.enableScrollWheelZoom(true); //启用滚轮放大缩小
        map.setMapStyleV2({
            styleId: '样式ID'
        });//地图样式


        const markeArray = [
            {
                longitude: 118.4308,  //经度
                latitude: 31.3543,    //纬度
                richText: `<h4 style='margin:0 0 6px 0;'>芜湖</h4> 2019.4.5点亮
                        <img style='float:right;margin:0 2px 11px' id='imgDemo' src='图片URL' width='139' height='104'/>
                        <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
                        地址:地处中国华东地区,安徽省东南部,西汉武帝元封二年前置县,因“蓄水不深而多生芜藻”始名“芜湖”。
                        </p>`
            },

            {
                longitude: 104.0601,  //经度
                latitude: 30.5994,    //纬度
                richText: `<h4 style='margin:0 0 6px 0;'>成都</h4> 2001.2.1点亮
                        <img style='float:right;margin:0 2px 11px' id='imgDemo' src='图片URL' width='139' height='104'/>
                        <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
                        地址:位于中国四川省中部,为四川省省会,国家中心城市。
                        </p>`
            },
        ];

        markeArray.forEach(item => {
            let marker1 = new BMapGL.Marker(new BMapGL.Point(item.longitude, item.latitude));// 创建点标记

            map.addOverlay(marker1);// 在地图上添加点标记
            // 创建信息窗口
            var opts = {
                width: 50,
                height: 25,
                title: item.title,
            };
            var infoWindow = new BMapGL.InfoWindow(item.richText);
            // 点标记添加点击事件
            marker1.addEventListener('click', function () {
                map.openInfoWindow(infoWindow, new BMapGL.Point(item.longitude, item.latitude)); // 开启信息窗口
            });

        });
    </script>
</body>

</html>

如何嵌入到网页

<iframe style="max-width: 100%" frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height="750px"src="替换成你的足迹地图链接"></iframe>
哔哔(0)
暂无评论,快来抢沙发