利用百度地图API显示多个地标信息弹出提示框的解决方法

最新推荐文章于 2024-07-20 14:29:31 发布

程序E生

最新推荐文章于 2024-07-20 14:29:31 发布

阅读量1.2w

点赞数 1

分类专栏： MVC Other

本文链接：https://blog.csdn.net/esunshine1985/article/details/52597222

版权

Other 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

MVC

3 篇文章 0 订阅

订阅专栏

通过使用百度地图API显示多个地标信息，每个地标信息弹出的提示框内容都是最后一个地标信息的数据，为此，查找很多资料终于解决了此疑难杂症，现将方法整理如下：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>MapIndex</title>
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #container {
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    </script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
        function message(obj, unitname, unittype, licenseid, address) {
            var opts = {
                width: 250,
                height: 100,
                title: unitname
            }
            var infoWindow = new BMap.InfoWindow("企业类型：" + unittype + "<br>" + "地址：" + address , opts);  // 创建信息窗口对象
            obj.openInfoWindow(infoWindow, map.getCenter());
        }

        function addMarker(point, marker, unitname, unittype, licenseid, address) {  // 创建图标对象
            map.addOverlay(marker);
            marker.addEventListener("click", function () {
                message(this, unitname, unittype, licenseid, address);
            });
        }

        function InitMap() {
            $.ajax({
                type: 'GET',
                url: 'GetCoordinates',
                data: '',
                success: function (data) {
				    //百度地图API方法，所有标注点弹出的提示框中的内容都是最后一个地标信息的内容
                    //for (var i = 0; i < data.length; i++) {
                    //    var p = new BMap.Point(data[i].Longitude, data[i].Latitude);  // 创建点坐标
                    //    var m = new BMap.Marker(p);  // 创建标注
                    //    map.addOverlay(m);              // 将标注添加到地图中

                    //    var opts = {
                    //        width: 250,     // 信息窗口宽度
                    //        height: 100,     // 信息窗口高度
                    //        title: "企业名称：" + data[i].UnitName, // 信息窗口标题
                    //    }
                    //    var infoWindow = new BMap.InfoWindow("企业类型：" + data[i].UnitType + "<br>" + "地址：" + data[i].Address, opts);  // 创建信息窗口对象
                    //    m.addEventListener("click", function () {
                    //        map.openInfoWindow(infoWindow, p); //开启信息窗口
                    //    });
                    //}

                    for (var i = 0; i < data.length; i++) {
                        var point = new BMap.Point(data[i].Longitude, data[i].Latitude);  // 创建点坐标
                        var marker = new BMap.Marker(point);  // 创建标注
                        addMarker(point, marker, data[i].UnitName, data[i].UnitType, data[i].Address);
                    }
                },
                error: function () {

                },
                dataType: "json"
            });
        }

        var map = new BMap.Map("container");          // 创建地图实例
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        var point = new BMap.Point(112.613712,35.088129);  // 创建点坐标
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
        InitMap();
    </script>
</body>
</html>