百度地图聚合点

最新推荐文章于 2024-06-17 15:39:42 发布

怵生

最新推荐文章于 2024-06-17 15:39:42 发布

阅读量646

点赞数

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

本文链接：https://blog.csdn.net/u013308135/article/details/51913783

版权

java 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

window.onload = function () {
  var map = new BMap.Map("allmap");
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
  map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  map.addControl(new BMap.OverviewMapControl({
    isOpen: true,
    anchor: BMAP_ANCHOR_BOTTOM_RIGHT
  })); //右下角，打开
  var navigationControl = new BMap.NavigationControl({
    anchor: BMAP_ANCHOR_TOP_LEFT, // 靠左上角位置
    type: BMAP_NAVIGATION_CONTROL_LARGE, // LARGE类型
    enableGeolocation: true // 启用显示定位
  });
  var sContent =
  "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" + 
  "<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>" + 
  "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" + 
  "</div>";
  map.addControl(navigationControl); //增加定位相关控件
  var markers = [];//店铺坐标数据
  var marker = null,pt = null;//点
  var MAX = 10;
  var infoWindow = null;  // 创建信息窗口对象
  for (var i = 0; i < MAX; i++) {
    pt = new BMap.Point(Math.random() * 40 + 84, Math.random() * 30 + 21);
    marker = new BMap.Marker(pt);
    infoWindow = new BMap.InfoWindow(sContent);
    marker.addEventListener("click", function(){          
       this.openInfoWindow(infoWindow);
       //图片加载完毕重绘infowindow
       document.getElementById('imgDemo').onload = function (){
           infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
       }
    });
     markers.push(marker);
  }
  //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
  var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
}

html

<!DOCTYPE html>
<html>
  <head>
    <title>demo</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wfZMWeQPKzUGfHZSdOPrU1xz"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>      

    <style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
    </style>
  </head>

  <body>
    <div id="allmap" style="width: 90%;height: 90%;position: absolute;"></div>
  </body>
</html>

怵生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图聚合点

jswindow.onload = function () { var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 5); map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.enableScrollWh
复制链接

扫一扫

专栏目录