百度地图显示指定位置,点击显示自定义内容

    本文主要是实现百度地图上标出指定位置的点,点击百度地图的覆盖物显示自定义的文本内容。具体如下图所示:
标注位置,点击显示自定义内容
    首先是页面部分,要先引入百度地图以及jQuery(jQuery不是必须,只是个人习惯)。

<script type="text/javascript" src="http://api.map.baidu.com/api?ak=&v=2.0&services=false"></script>

    这里的ak需要自己去申请,申请地址:http://lbsyun.baidu.com/apiconsole/key,也可以使用百度地图的旧版本:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

    这个版本是不需要ak就可以直接使用的。另外页面还需要两个容器来存放地图和自定义的显示框。

<div id="companyMap" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
<div id="map-address0" style="display:none">
   <p>自定义内容</p>
   <p>另一段自定义内容</p>
</div>
<script type="text/javascript">
    $(function (){
        mapPageInt();
    });
</script>

    这是个全屏的地图,可以调整companyMap的大小,需要注意的是companyMap的宽高必须有,否则默认都是为0。接下来是js的部分:

(function(global){
    var companyMap;
    companyMap = global.mapPage = {};
    companyMap = {
        map:null
    }
})(this);

function mapPageInt(){
    companyMap.map = new BMap.Map("companyMap");
    companyMap.map.enableScrollWheelZoom();

    var point = new BMap.Point(x,y);
    companyMap.map.centerAndZoom(point, 9);
    var infoWindow = new BMap.InfoWindow(document.getElementById("map-address0").innerHTML);
    var marker = new BMap.Marker(point);
    marker.addEventListener("click", function(){          
       this.openInfoWindow(infoWindow);
    });
    companyMap.map.addOverlay(marker);
}

    new BMap.Map(“companyMap”)在指定的容器内创建一个地图实例。enableScrollWheelZoom()方法启用地图放大缩小功能,默认禁用。BMap.Point(x,y)这个就是要定位的点的位置,x和y是经纬度。addOverlay()方法将自定义的覆盖物置入地图。具体的百度地图接口文档地址:

http://developer.baidu.com/map/reference/index.php?title=Class:%E6%A0%B8%E5%BF%83%E7%B1%BB/Map

    到这里就完成了百度地图添加覆盖物,以及点击覆盖物显示自定义内容的功能。

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Echarts 是一个开源的可视化图表库,它提供了丰富的图表类型和交互能力。其中,百度在线地图是 Echarts 支持的一种地图类型,可以通过 Echarts 来展示和操作百度地图数据。 要在百度在线地图中实现自定义标点并点弹出图片,我们可以按照以下步骤进行: 1. 获取地图数据:首先,我们需要获取百度地图的数据,可以通过百度地图开放平台的接口来获取相关数据,如地点的经纬度、图片的链接等。 2. 准备 Echarts 配置:在准备初始化 Echarts 图表的配置项时,我们需要指定地图的类型为百度在线地图,并将获取的地图数据填入到配置项中。 3. 自定义标点:通过配置项中的 series 数据项,我们可以自定义地图上的标点。可以在 series 数据项中设置自定义的符号样式、位置和弹出图片等信息。 4. 添加点事件:在配置项中,可以为标点添加点事件的回调函数。当用户点某个标点时,弹出对应图片的内容。 5. 实例化 Echarts 图表:最后,将准备好的配置项传入 Echarts 的实例化函数中,即可在页面上展示百度在线地图,并实现自定义标点并点弹出图片的功能。 总结起来,利用 Echarts 的百度在线地图功能,我们可以通过自定义标点并添加点事件的方式,轻松实现点某个标点弹出图片的效果。这样可以使地图更加丰富和互动,提升用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值