百度地图BMap

2023-11-04

做了半天,搜到一个很好的demo,能解决多点的问题

http://blog.csdn.net/a497785609/article/details/24009031



<div style="width: 800px; height: 500px; border: 1px solid gray"

    id="container"></div>

<script type="text/javascript">
    var map = new BMap.Map("container"); //创建地图容器
    var point = new BMap.Point(116.404, 39.915); //创建一个点
    map.centerAndZoom(point, 15); //设立中心点和地图级别,就是初始化地图
    var myLabel = new BMap.Label("1", //为lable填写内容
    {
        position : point
    }); //label的位置

    map.addOverlay(myLabel); //把label添加到地图上

    var infoWindow = new BMap.InfoWindow(
            "<p style='font-size:12px;lineheight:1.8em;'>我是lable打开的信息窗口</p>"); // 创建信息窗口对象
    myLabel.addEventListener("click", function() {
        map.openInfoWindow(infoWindow, point);
    });

</script>

点击弹出Label窗口


以上的写法有个弊端。如果加载多个点。每次点击点,都会弹出同一个窗口,就是最后一个加载的窗口。

所以改进写法如下。

<!DOCTYPE html>
<html>
<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 {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: "微软雅黑";
}

#container {
    width: 100%;
    height: 500px;
}

p {
    margin-left: 5px;
    font-size: 14px;
}
</style>
<script type="text/javascript"
    src="http://api.map.baidu.com/api?v=2.0&ak=yaDRGoon5YoRzAAwH781yUgn"></script>
<title>添加自定义覆盖物</title>
</head>
<body>
    <div id="container"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("container");//创建地图实例
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    map.addControl(new BMap.NavigationControl());//地图平移缩放控件

    //第一次
    var marker = new BMap.Marker(point); // 创建标注
    map.addOverlay(marker);//给地图增加标注
    var myLabel = new BMap.Label("北京", //为lable填写内容
    {
        position : point
    }); //label的位置

    map.addOverlay(myLabel); //把label添加到地图上
    marker.addEventListener(
        "click",
        function() {
            // 创建信息窗口对象   
            var infoWindow = new BMap.InfoWindow(
                    "<p style='font-size:12px;lineheight:1.8em;'>我是北京打开的信息窗口</p>");
            //在哪个点上弹出信息窗口
            point = new BMap.Point(116.404, 39.915);
            //打开窗口
            map.openInfoWindow(infoWindow, point);
        });

    //第二次
    point = new BMap.Point(114.53289913948, 38.026503763345);
    var marker = new BMap.Marker(point); // 创建标注
    map.addOverlay(marker);//给地图增加标注
    var myLabel = new BMap.Label("石家庄", //为lable填写内容
    {
        position : point
    }); //label的位置

    map.addOverlay(myLabel); //把label添加到地图上
    marker.addEventListener(
        "click",
        function() {
            // 创建信息窗口对象
            var infoWindow = new BMap.InfoWindow(
                    "<p style='font-size:12px;lineheight:1.8em;'>我是石家庄打开的信息窗口</p>");
            //在哪个点上弹出信息窗口
            point = new BMap.Point(114.53289913948, 38.026503763345);
            //打开窗口
            map.openInfoWindow(infoWindow, point);
        });
</script>


点击1:

点击“石家庄”



本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

百度地图BMap 的相关文章

  • PCB走线宽度

    结论 1A电流 至少10mil 建议15mil 2A电流 至少30mil 建议50mil 3A电流 至少60mil 建议100mil 大于3A 建议采用铺铜或开窗的形式 小于10mil线宽 建议电流小于0 1A
  • 如果有一条告警流量你会怎么分析,请详细说明?

    先要判断攻击有没有成功 是攻击成功的告警 还是攻击不成功但是真实的攻击 看规则的告警的名称 分析攻击源IP和目的IP 如果攻击源IP是内网的话 则可能为有关键特征的业务系统 被判为恶意攻击 内网可能沦陷 已被入侵 可能是设备使用盗版软件或者
  • Yolov5的安装配置与使用

    文章目录 一 下载Yolov5 1 下载Yolov5源码 2 下载Yolov5预训练模型 二 安装Yolov5 三 测试Yolov5 1 Img图片测试 2 Video视频测试 3 摄像头测试 三 小结 四 参考链接 在下载配置Yolov5
  • Echarts 实现两个图表联动

    init obj pageSource var that this console log obj pageSource this chart this echarts init document getElementById this i
  • 使用C++ Eigen库求解线性方程组Ax=b

    Eigen http eigen tuxfamily org 是常用的 C 矩阵运算库 具有很高的运算效率 大部分 需要在 C 中使用矩阵运算的库 都会选用 Eigen 作为基本代数库 例如 Google Tensorflow Google
  • 批量读取csv文件指定列

    目录 一 算法原理 二 代码实现 三 注意事项 一 算法原理 在读取csv文件进行点云处理的时候 常常需要跳过表头 并且进行批量读取 本代码 将每行数据记录为一个数组 并将多个csv文件合并记录 在使用中 需要自己修改想要提取的列数以及定义
  • FM33LG0XX-16位基本定时器

    FM33LG0包含1个16位基本定时器 基本定时器包含一个16bit自动重载计数器及一个可编程预分频器 基本定时器主要用来产生系统时基 也可以产生触发事件来驱动ADC采样 测试代码如下 void BSTIM Init uint16 t pr
  • 【转载收藏】Unity预计算实时GI

    初步介绍 新年假期结束了 想不想掌握一个新技能迎接全新的一年呢 不妨来阅读一下Unity预计算实时GI系列文章 本文是该系列的第一篇 在Unity中有两种区别很大的技术被用于计算全局光照GI或光源反射 它们就是烘焙全局光照 Baked GI
  • 【一文搞懂】FD_SET的使用

    阅读大概需要十分钟 绝对干货 看完还没搞懂你找我 随便查一下 可以看到对FD SET的说明如下 一个long类型的数组 提供给select 机制使用的一种数据结构 主要功能是建立联系 其中每一个数组元素都能与任意一个打开的句柄 socket
  • 回溯法(基础版)

    能进则进 不能进则换 不能换则退 退一步海阔天空 文章目录 算法适用问题 算法思想步骤 基础题目 A 装载问题 B 0 1背包问题 C N皇后问题 D 涂色问题 算法适用问题 搜索问题 求解的个数 最优解问题 算法思想步骤 深度优先搜索 定
  • js实现圆型的进度条

    一次项目需求中需要实现一个圆形的进度条 就参考了网上的一些资料做了一个demo 具体代码如下
  • Java线程池七大参数详解和配置

    目录 一 corePoolSize核心线程数 二 maximunPoolSize最大线程数 三 keepAliveTime空闲线程存活时间 四 unit空闲线程存活时间的单位 五 workQueue线程工作队列 1 ArrayBlockin
  • Mac如何读写NTFS硬盘,NTFSTool让Mac也可以轻松读写NTFS硬盘

    在了解Mac如何读写NTFS格式硬盘前 我们应该先了解什么是NTFS硬盘 以及Mac为什么不能对NTFS硬盘进行读写 一 什么是NTFS硬盘 NTFS格式硬盘最早出现于1993年的win NT操作系统中 作为一款日志文件系统 除了可以对硬盘
  • Java中 判断集合中的元素相等的依据 详细解析

    我们经常使用的集合如ArrayList LinkedList Vector 你在调用contains 方法的时候 或者是你在根据对象移除元素 remove Object o 你知道他们是如何判断集合中的元素是否 是相等的吗 接下来我们跟着源
  • 解决Linux MySQL报错ERROR 2002

    在Linux安装MySQL有时候会出现 mysql ERROR 2002 HY000 Can t connect to local MySQL server through socket var lib mysql mysql sock 2
  • Fority代码审计工具介绍

    Fortify SCA简介 Fortify SCA 是一个静态的 白盒的软件源代码安全测试工具 它通过内置的五大主要分析引擎 数据流 语义 结构 控制流 配置流等对应用软件的源代码进行静态的分析 分析的过程中与它特有的软件安全漏洞规则集进行
  • 速度教你创建网页文件,实现HTML入门

    今天 为大家准备了关于创建网页文件的学习内容 具体包括网页文件创建 HTML标签语法规范 HTML标签的关系以及HTML整体结构 完成以上内容的学习 零基础学习者基本上就能学会如何创建一个有简单内容的网页文件 快一起来看吧 1 网页文件的扩
  • Java常用包

    Java采用包结构来组织和管理类和接口文件 一 java lang包 该包提供了Java语言进行程序设计的基础类 它是默认导入的包 该包里面的Runnable接口和Object Math String StringBuffer System
  • Python中使用zlib库实现字符串的压缩和解压缩是一种常见的操作

    Python中使用zlib库实现字符串的压缩和解压缩是一种常见的操作 zlib库提供了一组函数 可以方便地对字符串进行压缩和解压缩操作 下面是一个详细的示例 展示了如何使用zlib库进行字符串的压缩和解压缩 首先 我们需要导入zlib库 i
  • C++模板的使用

    在平时的工作和学习过程中 经常会用到泛型 这里对泛型和模板进行一下梳理 以便理解和使用 模板关键字 template 为什么要使用模板 假如设计一个两个参数的函数 用来求两个对象的乘积 在实践中我们可能需要定义n多个函数 int multi

随机推荐

  • ETCD v3 restful api 使用详解

    ETCD v3 restful api 使用详解 网上已经有很多关于v2接口的使用了 类型下面的请求方式 本文就主要讲解v3版本的restful api的使用方式 V2版本 curl http 127 0 0 1 2379 v2 keys
  • C++语言基础--递归函数

    对于很多编程初学者来说 递归算法是学习语言的最大障碍之一 可能也有一大部分人知道递归 也能看的懂递归 但在实际做题过程中 却不知道怎么使用 递归的定义 1 很官方的说法 递归 在数学与计算机科学中 是指在函数的定义中使用函数自身的方法 也就
  • 机器学习集成模型学习——Boosting集成学习(四)

    Boosting Boosting模型是线性训练的 后面的模型会纠结于前一个模型预测错的部分 然后尝试把它修正 步骤如下 第一个模型用一部分训练集训练 得出这部分训练集上的错误点 错误的数据会有更大的概率被后续的模型选择 第二个模型再拿一部
  • Unbiased Teacher v2: Semi-supervised Object Detection for Anchor-free and Anchor-based Detectors

    摘要 随着最近半监督目标检测 SS OD 技术的发展 目标检测器可以通过使用有限的标记数据和丰富的未标记数据来改进 然而 仍有两个挑战没有解决 1 在无锚检测器上没有先期的SS OD工作 2 在伪标签边界框回归时 先期工作是无效的 在本文中
  • webpack学习

    前端工程化具体的解决方案 webpack 1 新建项目空白目录 文件夹地址栏cmd运行 npm init y 初始化包管理配置文件package json 2 新建src源代码目录 3 src下新建index html和index js 4
  • Java --- 堆空间大小设置与OutOfMemoryError(OOM)

    目录 一 堆空间大小设置 二 OutOfMemoryError异常 一 堆空间大小设置 1 Java堆区用于存储Java对象实例 那么堆的大小在JVM启动时就已经设定好了 大家可以通过选项 Xmx 和 Xms 来进行设置 Xms 用于表示堆
  • gorm的全部标签说明

    在 GORM 中 可以使用多种标签来控制模型结构体的行为和数据库列的属性 以下是一些常用的 GORM 标签 primaryKey 将字段设置为模型的主键 autoIncrement 将字段设置为自增长字段 unique 将字段设置为唯一的
  • Filter链,FilterConfig接口,Filter实现用户自动登录

    一 Filter链 在一个 Web 应用程序中可以注册多个 Filter 程序 每个 Filter 程序都可以针对某一个 URL 进行拦截 如果多个 Filter 程序都对同一个 URL 进行拦截 那么这些 Filter 就会组成一个 Fi
  • mongodb replica初始化

    use admin cfg id audit members id 0 host 10 96 91 192 17017 priority 2 id 1 host 10 96 91 192 27017 priority 1 id 2 host
  • VSCode中JS脚本的运行(控制台输出配置)

    F5开始调试 进入launch json中进行如下配置 使用 IntelliSense 了解相关属性 悬停以查看现有属性的描述 欲了解更多信息 请访问 https go microsoft com fwlink linkid 830387
  • node版本降级

    问题原因 因为node版本过高 导致npm install 或npm run dev报错 1 安装node版本管理模块 n sudo npm install n g 2 根据自己需要的安装版本 例如 安装稳定版本 sudo n stable
  • 设计模式之抽象工厂

    抽象工厂模式结构图 抽象工厂模式 提供一个创建一系列相关或相互依赖对象的接口 而无需指定它们具体的类 工厂方法模式 定义一个用于创建对象的接口 让子类决定实例化哪一个类 抽象工厂模式是围绕一个超级工厂创建其他工厂 该超级工程又称为其他工厂的
  • 【Spring容器的启动流程】

    Spring容器的启动流程主要分为以下几个步骤 加载配置文件 Spring容器会从指定的配置文件中读取配置信息 包括bean的定义 依赖关系 AOP切面等 创建容器 Spring容器启动后会创建一个容器实例 容器负责管理bean的生命周期和
  • 使用Numpy随机生成一个4维矩阵,计算最后两维的和

    深度学习作业 1 使用Numpy随机生成一个4维矩阵 计算最后两维的和 import numpy def chapter2 6 ax1 ax2 ax3 ax4 arr numpy random randint 2 size ax1 ax2
  • 云原生之使用Docker部署Laverna笔记工具

    云原生之使用Docker部署Laverna笔记工具 一 Laverna介绍 1 Laverna简介 2 Laverna特点 二 检查本地环境状态 1 检查系统版本 2 检查docker状态 三 下载Laverna镜像 四 部署Laverna
  • 【MQTT】MQTT服务器mosquitto和客户端paho的使用

    MQTT服务器mosquitto和客户端paho mosquitto安装使用 1 mosquitto下载 从官网下载最新版本 https mosquitto org download 以下是mosquitto2 0 14windowsX64
  • Vue入门案例--TodoList备忘录

    文章目录 前言 1 创建Vue项目 2 搭建项目 2 1 MyHeader编写 2 2 MyList编写 2 3 MyItem编写 2 4 MyFooter编写 2 5 App编写 3 初始化列表 3 1 App定义数据 3 2 MyLis
  • 排序动态图

    1 冒泡排序 2 选择排序 3 鸡尾酒排序 4 插入排序 5 归并排序 6 堆排序 7 希尔排序 8 快速排序 上面的图片如果打不开 在新标签页面就可以
  • python3.7 安装Airflow中HiveToMySqlTransfer报错解决

    报错内容如下 File app python lib python3 7 site packages airflow hooks hive hooks py line 783 in get conn from pyhive hive imp
  • 百度地图BMap

    做了半天 搜到一个很好的demo 能解决多点的问题 http blog csdn net a497785609 article details 24009031 div style width 100 height 500px border