百度地图web经纬度标点【保姆教程】

Wei *

已于 2022-02-10 21:18:37 修改

阅读量4.4k

点赞数 4

分类专栏：项目|攻略文章标签：前端街景地图百度api

于 2021-11-24 18:24:12 首次发布

本文链接：https://blog.csdn.net/qq_43406895/article/details/121519133

版权

项目|攻略专栏收录该内容

9 篇文章 6 订阅

订阅专栏

文章目录

官方文档
运行示例
创建自己的地图应用
- 目标功能
- 实现过程
部署应用
相关资料

官方文档

https://lbsyun.baidu.com/jsdemo.htm#SetCitynameCenter
在这里插入图片描述

运行示例

随意选择一段示例代码
创建一个 demo.html 文件，将内容粘贴其中。
在这里插入图片描述
下载一个 vscode 插件 live server。

下载完成后，右键创建的 html 文件 index.html

点击Open with Live Server。

会弹出百度未授权使用地图API，这个时候需要到百度官方申请一个。
https://lbs.baidu.com/apiconsole/key#/home

在这里插入图片描述

将自己的密匙放入该示例代码对应行，代替 “你的密钥” 就可以了。
在这里插入图片描述

再次运行，符合预期。
在这里插入图片描述

创建自己的地图应用

目标功能

将一系列的点标注到地图上，同时显示各自的标号。
在这里插入图片描述

实现过程

可以根据官方示例一点点地改成自己想要的样子。
我们就从已经运行成功的例子开始。

    var map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
    map.enableScrollWheelZoom(true);
    // 创建点标记
    var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925));
    var marker2 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));
    var marker3 = new BMapGL.Marker(new BMapGL.Point(116.395, 39.935));
    var marker4 = new BMapGL.Marker(new BMapGL.Point(116.415, 39.931));
    // 在地图上添加点标记
    map.addOverlay(marker1);
    map.addOverlay(marker2);
    map.addOverlay(marker3);
    map.addOverlay(marker4);

已知其 javascript 代码片段中创建了一个地图，同时标注了3个点。
我们首先学习一下如何在点上面添加数字。
不会怎么办？百度！
在这里插入图片描述
点进第二个https://blog.csdn.net/A_bad_boy_hahaha/article/details/113545278

看了一下还不错，写进代码试一下。

var map = new BMapGL.Map("container"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(lng,lat), 14); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

let mark = new BMapGL.Marker(new BMapGL.Point(lng, lat));
     // 在坐标点设置点标记
    map.addOverlay(mark);

    // 在点标记上添加数字（根据需求设置对应信息）
    var label = new BMapGL.Label(7, {
    //调整数字跟点标记的位置关系
      offset: new BMapGL.Size(-5, -20),
    });
    label.setStyle({
      background: "none",
      color: "#fff",
      border: "none", 
    });
    //对label的样式进行设置
    mark.setLabel(label);

果然有了数字。
那我们就需要把原来的代码改成现在的形式就好了。

首先创建一个数组，存放我们需要放在地图上的数据。

var points = [{ 'lng': 111.355353, 'lat': 30.471646, 'data': 28 }];

然后对数组进行遍历，将每个点标注到地图上，同时将 data 数据放到标注点上。

    for (let i = 0; i < points.length; i++) {
        var marker = new BMapGL.Marker(new BMapGL.Point(points[i].lng, points[i].lat));
        map.addOverlay(marker)
        // 在点标记上添加数字（根据需求设置对应信息）
        var label = new BMapGL.Label(points[i].data, {
            //调整数字跟点标记的位置关系
            offset: new BMapGL.Size(-10, -25),
        });
        label.setStyle({
            background: "none",
            color: "#000",
            border: "none",
        });
        //对label的样式进行设置
        marker.setLabel(label);
    }

同时，我希望我看到的是卫星地图，而不是正常普通的地图。
还是不会，怎么办？看官方文档！

在示例中心成功找到了卫星地图的样式。
在这里插入图片描述
看一下它的代码和普通地图有什么不一样的地方。

将自己代码的对应部分也改成这样就可以了，下面看一下效果。
在这里插入图片描述

完成代码如下，可以直接复制粘贴运行，记得改一下百度 AK。

<!--
 * @Author: Feng Wei
 * @Date: 2021-11-24 15:43:24
 * @LastEditTime: 2021-11-24 16:48:17
 * @LastEditors: Xaio Wei
 * @Description: 
 * @FilePath: \demo.html
-->

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的AK"></script>
</head>

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

</html>
<script>
    var map = new BMapGL.Map('allmap');
    map.centerAndZoom('武汉市', 12);
    map.enableScrollWheelZoom(true);
    map.setMapType(BMAP_EARTH_MAP);

    var points = [{ 'lng': 111.355353, 'lat': 30.471646, 'data': 28 }, { 'lng': 111.58312, 'lat': 30.34905, 'data': 55 }, { 'lng': 111.450178, 'lat': 30.69968, 'data': 83 }];

    for (let i = 0; i < points.length; i++) {
        var marker = new BMapGL.Marker(new BMapGL.Point(points[i].lng, points[i].lat));
        map.addOverlay(marker)
        // 在点标记上添加数字（根据需求设置对应信息）
        var label = new BMapGL.Label(points[i].data, {
            //调整数字跟点标记的位置关系
            offset: new BMapGL.Size(-10, -25),
        });
        label.setStyle({
            background: "none",
            color: "#000",
            border: "none",
        });
        //对label的样式进行设置
        marker.setLabel(label);
    }

</script>

部署应用

如果你没有自己的服务器的话，那么到这一步就可以不用看了。直接在本地浏览就可以。

安装nginx

我的操作系统是 ubuntu
使用如下命令安装 nginx

apt-get install nginx

查看 nginx 版本来确认自己已经安装成功。
在这里插入图片描述

修改 nginx 配置文件

修改 etc/nginx 下的 nginx.conf 文件。

user root;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
	# multi_accept on;
}

http {
	server {
	listen 8090 default_server;
	listen [::]:8090 default_server;

	root /root/workspace;
	index demo.html;
	}
	
}

http 中添加一个 server
listen 后的数字表示端口
root 后跟 html 文件存放的文件夹
index 后跟 html 文件。