云计算、AI、云原生、大数据等一站式技术学习平台

网站首页 > 教程文章 正文

第14天|14天搞定Vue3.0，电子地图，一定要用Vue?

jxf315 2024-12-29 04:05:49 教程文章 41 ℃

在大数据时代，用电子地图展示数据的需求，已成为常规需求。为此，我在介绍新技术时，会经常提到。网上好多在介绍Vue集成电子地图时，总是说得那么复杂。

其实，用电子地图，完全可以不用管Vue的，直接用Javascript就可以实现。

14.1 获取Appkey

用你的百度账号，登录到百度API key的申请地址https://lbsyun.baidu.com/apiconsole/key/create。登录成功后，如果没有直接导航到【创建应用】节点的话，就手动点击【创建应用】。

填写应用名称：sales，应用类型：浏览器端。启用服务：全部勾上。Referer白名单：填写半角*。填写好后，点击【提交】按钮。

在返回的窗口中，会有API key这项内容，复制出来，保存在某个地方，稍后就会用到。

14.2 电子地图

代码里的"你的key"，改成你申请到的。仔细阅读代码，你会发现，这里和Vue3.0没半毛钱关系。实现一个功能，看需求文档的要求，如果根本就不需要到Vue3.0的话，就不要硬用。好了，废话不多说，看代码吧。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的key">
    </script>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
    var map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
    map.enableScrollWheelZoom(true);
</script>

输出结果

好了，有关电子地图，一定要用Vue的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。我在分享Python，前端、Java和App方面的干货。关注我，没错的。

#前端##Vue.js##JavaScript##程序员##Web#

Tags：

猜你喜欢

最近发表
标签列表