百度地图上自动义坐标点及详细信息效果代码

#麻辣小龙虾#

已于 2023-04-17 18:34:30 修改

阅读量1k

点赞数

分类专栏：百度地图文章标签：百度地图

于 2019-09-08 13:27:54 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/100625779

版权

百度地图专栏收录该内容

3 篇文章 1 订阅

订阅专栏

我们有时候做开发会用到百度地图上的一些借口，来实现对应的功能显示，鼠标移入移出显示对应的信息，并可以自己定义显示的内容，现在我们就来做一个百度地图上自动义坐标点计及详细信息效果。

参考百度地图Api地址：

地图JS API示例 | 百度地图开放平台

最终效果

代码如下：

<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="./index.css" disabled>
    <title>百度地图上自动义坐标点计及详细信息代码</title>
    <meta name="description" content="刮奖">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>CanvasLayer</title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=pTeC0IZvnpLiWdXUgBzrSUQ0l0gQPcjS"></script>
    <style>
        body{margin: 0;}
        #allmap{width:100%;height:600px;}
    </style>
</head>

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

    <script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
    // map.enableScrollWheelZoom(true);  // 支持缩放
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);  // 显示地图中心点
    // 地图数据
    var pointData = [
        {lng: 116.391692, lat: 39.919528, mapId: 1},
        {lng: 116.404, lat: 39.915, mapId: 2},
        {lng: 116.415551, lat: 39.912223, mapId: 3}
    ];
    pointData.forEach((item, index) => {
        // 引入地图上的点
        let myIcon = new BMap.Icon("./icon.jpg", new BMap.Size(50,50));
        let currentPoint = new BMap.Point(item.lng, item.lat);
        let marker = new BMap.Marker(currentPoint, {icon:myIcon});  // 创建标注
        marker.mapId = item.mapId;  // 添加id
        marker.addEventListener("mouseover", showMsg);
        marker.addEventListener("mouseout", hideMsg);
        map.addOverlay(marker);    //增加点
        // 显示鼠标移入后的信息
        function showMsg(){
            console.log('进去')
            let p = this.getPosition();  //获取marker的位置
            console.log("marker的位置是" + p.lng + "," + p.lat);    
            console.log("marker == id" + this.mapId);
            console.log(document.querySelector('#MAP' + this.mapId));
            document.querySelector('#MAP' + this.mapId).style.display = 'block';
        }
        // 隐藏鼠标移入后的信息
        function hideMsg(){
            console.log(event)
            var p = this.getPosition();  //获取marker的位置
            console.log("marker的位置是" + p.lng + "," + p.lat);    
            console.log("marker == id" + this.mapId);
            console.log(document.querySelector('#MAP' + this.mapId));
            document.querySelector('#MAP' + this.mapId).style.display = 'none';
        }
        createDiv();
        // 创建地图上对应点点的要显示的内容信息
        function createDiv() {
            let pixel = map.pointToOverlayPixel(new BMap.Point(item.lng, item.lat));   // 获取地图上点的位置坐标left, top
            let div = document.createElement("div");
            // 修改样式
            div.id = "MAP" + marker.mapId;
            div.style.backgroundColor = "#EE5D5B";
            div.style.display = "none";
            div.style.border = "1px solid #BC3B3A";
            div.style.position = "absolute";
            div.style.height = "200px";
            div.style.width = "200px";
            div.style.fontSize = "20px";
            div.style.wordWrap = "break-word";
            div.style.left = pixel.x + 'px';
            div.style.top = pixel.y + 'px';
            div.innerHTML = JSON.stringify(item);
            
            div.onmouseover = function(){
            this.innerHTML = "百度地图里面的内容onmouseover" + JSON.stringify(item);
            }
            div.onmouseout = function(){
            this.innerHTML = "百度地图里面的内容onmouseout" + JSON.stringify(item);
            }
            
            map.getPanes().labelPane.appendChild(div);  // 将生成的div添加到百度地图
            map.addOverlay(div);
        }
    });
</script>
</body>

</html>

#麻辣小龙虾#

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
百度地图上自动义坐标点及详细信息效果代码

我们有时候做开发会用到百度地图上的一些借口，来实现对应的功能显示，鼠标移入移出显示对应的信息，并可以自己定义显示的内容，现在我们就来做一个百度地图上自动义坐标点计及详细信息效果。参考百度地图Api地址：http://lbsyun.baidu.com/jsdemo.htm#c1_11最终效果代码如下：<!DOCTYPE html><!--[...
复制链接

扫一扫