①百度地图的转码是异步转码，因此使用 for循环后得到的结果对不上，可以通过全局变量来控制模拟for 语句
都是异步解码，不能直接通过for语句来实现，每个解码的返回结果循序不一定按照循序返回，要通过全局变量来控制模拟for语句
var al=Array.length - 1
var now=0
function makeLine() {
var gpsPoint=new BMap.Point(Array[now], Array[now + 1]);
BMap.Convertor.translate(gpsPoint,0,translateCallback);
now+=2;
}
translateCallback = function (point){
PointArr.push(point);
setTimeout("makepoly()", 1000);
}
function makepoly() {
//大于总数，返回
if(num>=total_num){
return;
}
//第一个点不画线只描点
if(num==0){
//alert(num);
var markergps = new BMap.Marker(PointArr[0]);
map.addOverlay(markergps);
num++;
}
else{
//alert(num);
var polyline = new BMap.Polyline([PointArr[num - 1], PointArr[num]], { strokeColor: "blue", strokeWeight: 3, strokeOpacity: 0.5 }); //定义折线
map.addOverlay(polyline); //添加折线到地图上
var markergps = new BMap.Marker(PointArr[num]);
map.addOverlay(markergps);
num++;
}
if(now<al) makeLine()
}
example：
<!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" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=123686061000b0a9e9a9b9dba89b75db"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<title>show the demand for ATM</title>
<style type="text/css">
ul,li{list-style: none;margin:0;padding:0;float:left;}
html{height:100%}
body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
#container{height:97%;width:100%;}
#r-result{width:100%;}
</style>
</head>
<body>
<div id="container"></div>
<div id="r-result">
<input type="text" id="myinput" >
<input type="button" οnclick="openHeatmap();" value="show"/>
<input type="button" οnclick="closeHeatmap();" value="close"/>
<input type="button" οnclick="openTeam();" value="showTeam"/>
<input type="button" οnclick="closeTeam();" value="closeTeam"/>
<textarea id="Div1" cols="50" rows="1">ddddd</textarea>
</div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(117.186942,39.017501);
map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(); // 允许滚轮缩放
var points =[
{"lng":117.421599,"lat":40.229843,"count":10},
];
var xiaofangduiPoints = [
{"zhi":"得到的","zhong":"得到的","lng":117.722006,"lat":38.996238},
];
var markers = [];
if(!isSupportCanvas()){
alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
}
//详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md
//参数说明如下:
/* visible 热力图是否显示,默认为true
* opacity 热力的透明度,1-100
* radius 势力图的每个点的半径大小
* gradient {JSON} 热力图的渐变区间 . gradient如下所示
* {
.2:'rgb(0, 255, 255)',
.5:'rgb(0, 110, 255)',
.8:'rgb(100, 0, 255)'
}
其中 key 表示插值的位置, 0~1.
value 为颜色值.
*/
var size=50;
// function inputvalue(){
// var size = document.getElementById("myinput").value;
// }
// alert(size);
//是否显示热力图
function openHeatmap(){
heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":document.getElementById("myinput").value});
map.addOverlay(heatmapOverlay);
heatmapOverlay.setDataSet({data:points,max:100});
heatmapOverlay.show();
}
function closeHeatmap(){
heatmapOverlay.hide();
closeHeatmap();
}
function setGradient(){
/*格式如下所示:
{
0:'rgb(102, 255, 0)',
.5:'rgb(255, 170, 0)',
1:'rgb(255, 0, 0)'
}*/
var gradient = {};
var colors = document.querySelectorAll("input[type='color']");
colors = [].slice.call(colors,0);
colors.forEach(function(ele){
gradient[ele.getAttribute("data-key")] = ele.value;
});
heatmapOverlay.setOptions({"gradient":gradient});
}
//判断浏览区是否支持canvas
function isSupportCanvas(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
// 编写自定义函数,创建标注
function addMarker1(point,label){
var marker = new BMap.Marker(point);
markers.push(marker);
map.addOverlay(marker);
marker.setLabel(label);
}
function addTeam(){
for(var i = 0 ; i < xiaofangduiPoints.length; i++){
var x = xiaofangduiPoints[i].lng;
var y = xiaofangduiPoints[i].lat;
var zhi = xiaofangduiPoints[i].zhi;
//alert(name);
var zhong = xiaofangduiPoints[i].zhong;
var point = new BMap.Point(x,y);
var label = new BMap.Label(zhi +":"+zhong,{offset:new BMap.Size(20,-10)});
addMarker1(point,label);
}
}
// addTeam();
function openTeam(){
for (var i = 0; i < markers.length; i++){
markers[i].show();
}
}
function closeTeam(){
for (var i = 0; i < markers.length; i++){
markers[i].hide();
}
}
//坐标转换完之后的回调函数all
translateCallbackAll = function (data){
if(data.status === 0) {
for (var i = 0; i < data.points.length; i++) {
bm.addOverlay(new BMap.Marker(data.points[i]));
bm.setCenter(data.points[i]);
}
}
}
//一个坐标转换完之后的回调函数
translateCallback = function (data){
if(data.status === 0) {
s = s + '\"lng\":'+data.points[0].lng+',\"lat\":'+data.points[0].lat+'},\n'
document.getElementById('Div1').value = s;
var label = new BMap.Label(s1 +":"+s2,{offset:new BMap.Size(20,-10)});
addMarker1(data.points[0],label)
if (now <= al) deal();
}
}
var s = '';
var al = xiaofangduiPoints.length - 1;
var now = 0;
var s1 = null;
var s2 = null;
function deal(){
var x = xiaofangduiPoints[now].lng;
var y = xiaofangduiPoints[now].lat;
var zhi = xiaofangduiPoints[now].zhi;
//alert(name);
var zhong = xiaofangduiPoints[now].zhong;
var point = new BMap.Point(x,y);
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(point);
s = s + '{\"zhi\":\"'+zhi+'\",\"zhong\":\"'+zhong+'\",';
s1 = zhi;
s2 = zhong;
convertor.translate(pointArr, 1, 5, translateCallback);
now = now + 1;
}
deal(xiaofangduiPoints[now]);
</script>
4365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
