百度地图

Posted 2021-01-30 xi-li

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图相关的知识，希望对你有一定的参考价值。

功能：通过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>

以上是关于百度地图的主要内容，如果未能解决你的问题，请参考以下文章

谷歌地图片段显示，但没有地图

在Android Studio片段之间切换时地图片段不隐藏