百度地图 添加热区（Hotspot）
申请秘钥
代码在此
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v3.0版本添加热区</title><style>html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:80%} </style><script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的秘钥"></script>
</head>
<body><div id="container"></div> <button id="yichu">移除热区</button><script>// 创建地图实例 var map = new BMap.Map("container");// 创建点坐标 var point = new BMap.Point(112.52784132957458,26.956741622737916); // new BMap.Point(116.404, 39.915); //// 初始化地图，设置中心点坐标和地图级别map.centerAndZoom(point, 15); map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_SATELLITE_MAP] }));// 地图类型 卫星var mark = new BMap.Marker(point);map.addOverlay(mark);var labe = new BMap.Label("Labelvv",{position:point})//map.addOverlay(labe);var datas = getHeatData();function getHeatData(cnt, max, min){cnt = cnt || 100; max = max || 100;min = min || 0;var data = [];var center ={lat:26.956741622737916,lng:112.52784132957458}; for(var i=0;i<cnt ;i++){ //遍历生成 100 条数据var r = Math.random();var angle = Math.random() * Math.PI * 2;var heatValue = Math.random() * (max - min) + min;data.push({ // 1 1 区域 长宽lat: center.lat + 1*r * Math.sin(angle),lng: center.lng + 1*r * Math.cos(angle),value: heatValue});}var ss = {max: max,min: min,data: data};console.log(ss)return ss;}var arrdian =[];for(var i=0;i<datas.data.length;i++){ var dian = new BMap.Point(datas.data[i].lng,datas.data[i].lat)arrdian.push(dian)var marks = new BMap.Marker(dian);var lab = new BMap.Label("Label"+i,{position:dian})map.addOverlay(marks);//map.addOverlay(lab);var hotSpotv = new BMap.Hotspot(dian,{text:'xx'+i,//userData: datas,//由用户填入的自定义数据 会改变位置minZoom:1,//热区生效的最小级别maxZoom:98 //热区生效的最大级别})// 地图添加热区 鼠标hover显示map.addHotspot(hotSpotv);}map.setViewport(arrdian);var hotSpot = new BMap.Hotspot(map.getCenter(),{text:'xxxxxxxxxxxxxxxxxx', //当鼠标移至某一热区上时出现的文字提示//热区响应区域距中心点的扩展偏移值。数组的四个数值分别表示上、右、下、左距离中心点的扩展偏移量。默认偏移量为[5, 5, 5, 5]offsets:[25, 25, 25, 25], //userData: datas,//由用户填入的自定义数据 会改变位置minZoom:8,//热区生效的最小级别maxZoom:18 //热区生效的最大级别})// 地图添加热区 鼠标hover显示map.addHotspot(hotSpot);console.log(hotSpot.getPosition());//获取热区位置坐标// hotSpot.setPosition();//设置热区位置坐标// hotSpot.getText();//获取热区提示文本// hotSpot.setText("dfds");//设置热区提示文本// hotSpot.getUserData();//获取热区对应的用户数据// hotSpot.setUserData();//设置热区对应的用户数据var yichu = document.getElementById("yichu");yichu.addEventListener('click',function(){//map.removeHotspot(hotSpot);//移除某个地图热区 hover出不来 但还能获取热区位置坐标map.clearHotspots();//清空地图所有热区 hover出不来 但还能获取热区位置坐标//console.log(hotSpot.getPosition());})</script>
</body>
</html>