§3 点亮你的光点——在百度地图上进行多样的标注

3.1 创建标注点

3.1.1 创建一个简单的标注点

参考百度地图官方文档

var point = new BMapGL.Point(116.404, 39.915);   // 添加点坐标
var marker = new BMapGL.Marker(point);           // 创建标注   
map.addOverlay(marker);                          // 将标注添加到地图中

效果如下：

3.1.2 连接数据库批量创建标注点

在实际的使用场景中，往往会根据需要创建多个标注点，那么我们可以先将创建标记点的语句打包成一个函数：

function addmypoint(pos) {
    pos_x = pos.split(",")[0];
    pos_y = pos.split(",")[1];
    var mypoint = new BMapGL.Point(pos_x, pos_y);
    var marker = new BMapGL.Marker(mypoint);    // 创建标注   
    map.addOverlay(marker);                     // 将标注添加到地图中
}

笔者所用的数据的格式是诸如116.404,39.915，因此笔者采用了传入pos，再将字符串拆分为经纬度。

然后将这个html文件的后缀名改为php，然后连接数据库，执行SQL语句，在遍历每个结果时，打印出addmypoint(pos)，从而实现将数据库中的点批量标记在地图上。

在输出时，要将addmypoint()函数里的pos替换为对应的查询结果。
PHP是超文本预处理器，因此可以直接在html中打印出JavaScript语句，从而实现js函数的调用。

此处po一个例子代码：

function addmypoint(pos) {
    pos_x = pos.split(",")[0];
    pos_y = pos.split(",")[1];
    var point1 = new BMapGL.Point(pos_x, pos_y);
    var marker = new BMapGL.Marker(point1);      // 创建标注   
    map.addOverlay(marker);                      // 将标注添加到地图中
}
<?php
    //查询
    $sqla_co = "select * from gis";
    $query_co = mysql_query($sqla_co, $conn);
    while ($row = mysql_fetch_array($query_co)) {
        echo  "addmypoint('" . $row['xy'] . "');";
    }
?>

代码只是执行SQL语句的部分。连接数据库等过程不可省略，只是在上述代码没有呈现。

效果如下：

地图数据来源于网络，仅用于演示，不具有学术价值。

3.2 创建标签

3.2.1 创建一个简单的标签

var point = new BMapGL.Point(116.404, 39.915);  // 添加点坐标
var content = "label";
var label = new BMapGL.Label(content, {         // 创建文本标注
    position: point,                            // 设置标注的地理位置
    offset: new BMapGL.Size(10, 20)             // 设置标注的偏移量
})  
map.addOverlay(label);                          // 将标注添加到地图中

注意
设置标注的地理位置时要注意一定要对应好所要设定的点，尤其是之后打包成函数的时候，很容易对应错误导致bug。

效果如下：

默认的标签样式比较丑，我们可以对其样式进行改变

label.setStyle({                   // 设置label的样式
    color: '#000',                 // 字体颜色
    fontSize: '30px',              // 字体大小
    border: '2px solid #1E90FF'    // 字体标签边框粗细、类型、颜色
})

运行效果如下：

改变样式的代码最好紧跟在所要改变的label之后，以免样式作用到其他的标签上。

3.2.2 连接数据库批量创建标签

为了方便调用，我们添加标签的代码和添加点的代码打包在一起

function addmypoint(pos, labletext) {
    pos_x = pos.split(",")[0];
    pos_y = pos.split(",")[1];
    var mypoint = new BMapGL.Point(pos_x, pos_y);
    var marker = new BMapGL.Marker(mypoint);       // 创建标注  
    map.addOverlay(marker);                        // 将标注添加到地图中
    var content = labletext;
    var label = new BMapGL.Label(content, {        // 创建文本标注
        position: mypoint,                         // 设置标注的地理位置
        offset: new BMapGL.Size(4, 4)              // 设置标注的偏移量
    })
    map.addOverlay(label);                         // 将标注添加到地图中
    label.setStyle({                               // 设置label的样式
        color: '#000',                             // 字体颜色
        fontSize: '20px',                          // 字体大小
        border: '2px solid #1E90FF'                // 字体标签边框粗细、类型、颜色
    })
}

然后用php连接数据库，执行SQL语句，并遍历结果，输出js语句：

<?php
    //查询
    $sqla_co = "select * from gis";
    $query_co = mysql_query($sqla_co, $conn);
    while ($row = mysql_fetch_array($query_co)) {
        echo  "addmypoint('" . $row['xy'] . "', '" . $row['name'] . "');";
    }
?>

代码只是执行SQL语句的部分。连接数据库等过程不可省略，只是在上述代码没有呈现。

效果如下：

3.3 创建信息窗口

3.3.1 创建一个简单的信息窗口

信息窗口可以展示更为丰富的文字和多媒体信息。点击标记点触发对应的信息窗口，同一时间只能打开一个信息窗口。
首先来看一下百度地图官方文档提供的代码

var opts = {
    width: 250,     // 信息窗口宽度
    height: 100,    // 信息窗口高度
    title: "Hello"  // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow("World", opts);  // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口

信息窗口和其他的标记不同之处在于，它并不是一个恒定存在的标签，而是需要在某个时刻发生某个事件后触发，例如用户点击了某个点的时候。而且触发后即调用信息窗口打开函数时需要给定信息窗口的对象和展示在某个地方的位置坐标。

上面百度提供的官方代码中是默认将信息窗口展示在地图中心的，所以用的是map.getCenter()

要实现完整的功能，还需要利用事件监听函数，将点击标记点事件和信息窗口弹出事件绑定在一起。

marker.addEventListener("click", function() {
    map.openInfoWindow(infoWindow, mypoint);         //开启信息窗口
});

marker是所要绑定的标注点
mypoint是一个点对象

上述对整个过程的描述可能还是会有点抽象，于是po一个例子来看一下：

var point = new BMapGL.Point(116.404, 39.915);           // 添加点坐标
var marker = new BMapGL.Marker(point);                   // 创建标注   
map.addOverlay(marker);                                  // 将标注添加到地图中
var opts = {
    width: 200,      // 信息窗口宽度
    height: 100,     // 信息窗口高度
    title: 'hello'   // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow("World", opts);   // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());         // 打开信息窗口
marker.addEventListener("click", function() {
    map.openInfoWindow(infoWindow, point);               //开启信息窗口
});

运行网页后，点击标注点效果如下：

3.3.2 连接数据库批量创建信息窗口

为了方便调用，我们创建信息窗口的代码和添加点的代码及添加标签的代码打包在一起

function addmypoint(pos, labletext, infotitle, infotext) {
    pos_x = pos.split(",")[0];
    pos_y = pos.split(",")[1];

    // 添加标注点
    var mypoint = new BMapGL.Point(pos_x, pos_y);
    var marker = new BMapGL.Marker(mypoint);        // 创建标注   
    map.addOverlay(marker);                         // 将标注添加到地图中
    
    // 添加标注标签
    var label = new BMapGL.Label(labletext, {       // 创建文本标注
        position: mypoint,                          // 设置标注的地理位置
        offset: new BMapGL.Size(4, 4)               // 设置标注的偏移量
    })
    map.addOverlay(label);                          // 将标注添加到地图中
    label.setStyle({  // 设置label的样式
        color: '#000',
        fontSize: '20px',
        border: '2px solid #1E90FF'
    });

    // 创建信息窗口
    var opts = {
        width: 200,        // 信息窗口宽度
        height: 100,       // 信息窗口高度
        title: infotitle   // 信息窗口标题
    }
    var infoWindow = new BMapGL.InfoWindow(infotext, opts);   // 创建信息窗口对象 
    marker.addEventListener("click", function() {
        map.openInfoWindow(infoWindow, mypoint);              //开启信息窗口
    });
}

然后用php连接数据库，执行SQL语句，并遍历结果，输出js语句：

<?php
    //查询
    $sqla_co = "select * from gis";
    $query_co = mysql_query($sqla_co, $conn);
    while ($row = mysql_fetch_array($query_co)) {
        echo  "addmypoint('" . $row['xy'] . "', '" . $row['name'] . "', '" . $row['type'] . "', '" . $row['n'] . "');";
    }
?>

代码只是执行SQL语句的部分。连接数据库等过程不可省略，只是在上述代码没有呈现。

运行网页，点击某个标注点，则在对应位置弹出信息窗口，效果如下：

至此基本实现了在地图上创建多种形式的标注，并能结合数据库，高效地批量创建。
本文中的PHP均是为了演示需要，遍历输出了所有数据，在实际场景中，可以根据需求编写PHP语句，进而能控制性地在地图上进行多种形式的标记。