标签：char point out asc i++ zoom async enter data
功能：通过ajax获取到数据标记在地图上，鼠标移上去显示该标记的信息。
遇到的坑：把创建窗口的代码即cont(name,longi,lati,mark)方法里面的代码放在了for循环中，所有的标记显示的信息都是最后一条数据信息。
解决办法：把创建窗口的代码封装在了方法里，正常显示。
完整代码：
<!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:"微软雅黑";}
#allmap{height:100%;width:100%;}
#r-result{width:100%;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=H59Qq9DG6l9nm1rF80cMdDRH"></script><!--百度地图API-->
<title>百度地图</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建中心点坐标
map.centerAndZoom(point, 5); // 设置地图级别(地图缩放级别，数字越大，缩放的范围越大)
map.enableScrollWheelZoom(); //启用滚轮放大缩小
//创建信息窗口
function cont(name,longi,lati,mark){
var opts = {
width : 260, //信息窗口宽度
height: 80, //信息窗口高度
title : "<b>服务站信息</b>" , //信息窗口标题
enableMessage:true //设置允许信息窗发送短息
};
var content = ‘<div><p style="margin:0;line-height:1.5;font-size:13px;">‘+name+‘<br/>经度：‘+longi+‘<br/>纬度：‘+lati+
‘<br/></p></div>‘;
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
//添加鼠标滑过时打开自定义信息窗口事件
mark.addEventListener("mouseover",function () {
this.openInfoWindow(infoWindow);
});
//添加鼠标离开时关闭自定义信息窗口事件
mark.addEventListener("mouseout",function () {
this.closeInfoWindow();
});
}
$.ajax({
async:false,
cache:true,
url: "获取位置信息的接口",
type: ‘GET‘,
success: function(result){
if(result != undefined && result.length >0){
map.centerAndZoom(new BMap.Point(result[0].longitude, result[0].latitude));
var longitude = [], latitude = [];
for (var i = 0; i < result.length; i++) {
var marker = new BMap.Marker(new BMap.Point(data[i].longi,data[i].lati)); // 创建点
map.addOverlay(marker); //增加点
cont(data[i].name,data[i].longi,data[i].lati,marker); //调用创建窗口方法
}
}
},
error:function(e){
alert("获取信息失败");
}
});
</script>
标签：char point out asc i++ zoom async enter data
原文地址：https://www.cnblogs.com/xi-li/p/10185445.html
