百度地图无法显示 绘制点图 js资源丢失问题解决方案

最近在做企业网站时使用到了百度地图API，在平台功能与服务中可以点击地图信息可视化平台来制作点图的标记。

任务：想要在中国地图上绘制一张覆盖个别城市的点图。但在调试好平台的地图向网页迁移时出现了无法显示的问题。解决方案如下：

1.地图js资源说明

使用过绘制地图的开发者，应该熟悉地图的在线编译器。
下图圈出的是基本地图属性的script代码，包含了地图所需js资源。

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

而绘制点图与绘制地图的不同，可以看到如下页面。其需要的script资源更多，（主要是绘制所需）
https://mapv.baidu.com/gl/examples/editor.html#point-china.html

 <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
 <script src="//mapv.baidu.com/build/mapv.min.js"></script>
 <script src="static/common.js"></script>
 <script src="https://code.bdstatic.com/npm/[email protected]/dist/mapvgl.min.js"></script>

2.查看测试网站判断是否缺失js资源

在测试网站中按F12打开浏览器开发者工具，在网络>>全部中可看到网站所需资源，如果左侧js资源名称显示标红，那么就是js资源缺失了。

3 修复丢失的js资源

ak密匙这里隐藏了

<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=******************************"></script>
<script src="{% static 'js/common.js' %}"></script>
<script src="https://mapv.baidu.com/build/mapv.min.js"></script>
<script src="https://code.bdstatic.com/npm/[email protected]/dist/mapvgl.min.js"></script>

首先我们在api.map.baidu.com/api、mapv.baidu.com/build/mapv.min.js前添加https://
这是因为在百度地图实例中js资源是相对路径，而在本地访问互联网资源需要使用绝对路径。
这时候就会有小伙伴疑问，common.js在哪里，平台也没有说明，其实这个资源我们可以在百度地图编译器页面https://mapv.baidu.com/gl/examples/editor.html#point-china.html使用F12在线编译器，在源代码>>网页中就可以找到common.js，再复制到自己项目的js文件夹目录下即可了。

<script src="{% static 'js/common.js' %}"></script>

<script src="js/common.js'"></script>

因为这里博主的网页框架使用了Django，本地资源需要静态资源查找，如果使用别的框架可以去掉{%%}模板静态资源标识。

4Django框架的一些注意

如果修改后资源都找不到，而且项目框架也是Django，很有可能是script代码的位置放在了Django模板的endblock之后，虽然script标签的位置在HTML文件里没有限制，但如果不在模板内容之内是写不进生成的HTML中的。