百度地图开发者js_api引入

最新推荐文章于 2021-01-07 10:43:43 发布

源者鬼道

最新推荐文章于 2021-01-07 10:43:43 发布

阅读量145

点赞数

文章标签： java map js ajax

本文链接：https://blog.csdn.net/qq_40298231/article/details/103279397

版权

示例代码如下：

<!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,#iotmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <title>经纬度详情展示api</title>
</head>
<body>
<div id="iotmap"></div>
</body>
</html>
<script type="text/javascript">
    function initData(){
        var points = [];
        $.ajax({
            url:"/controller_api/message",
            type:"post",
            dataType:"json",
            data:{},
            success:function(obj){
                $.each(obj, function (index, value) {
                    points.push({"x":value.x,"y":value.y,"url":value.url});
                });
                addMarker(points);
                console.log(points)
            },
            error:function (obj) {
                alert("error")
            }
        });
    }
    //创建标注点并添加到地图中
    function addMarker(points) {
        //循环建立标注点
        for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
            var point = new BMap.Point(points[i].x, points[i].y); //将标注点转化成地图上的点
            var marker = new BMap.Marker(point); //将点转化成标注点
            map.addOverlay(marker);  //将标注点添加到地图上
            //添加监听事件
            (function() {
                var thePoint = points[i];
                marker.addEventListener("click",
                    function() {
                        showInfo(this,thePoint);
                    });
            })();
        }
    }
    function showInfo(thisMarker,point) {
        //获取点的信息
        var sContent =
            '<ul style="margin:0 0 5px 0;padding:0.2em 0">'
            +'<li style="line-height: 26px;font-size: 15px;">'
            +'<span style="width: 50px;display: inline-block;">经度：</span>' + point.x + '</li>'
            +'<li style="line-height: 26px;font-size: 15px;">'
            +'<span style="width: 50px;display: inline-block;">纬度：</span>' + point.y + '</li>'
            +'<li style="line-height: 26px;font-size: 15px;"><span style="width: 50px;display: inline-block;">详请：</span><a href="'+point.url+'">详情</a></li>'
            +'</ul>';
        var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
        thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
    }
    //创建地图
    var map = new BMap.Map("iotmap");
    map.centerAndZoom(new BMap.Point(116.3964,39.9093), 10);  // 设置中心点
    // map.addControl(new BMap.MapTypeControl());
    map.enableScrollWheelZoom(true);
    initData();
</script>

示例代码与官网提供整合：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>经纬度api详情显示</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
    body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script type="text/javascript">
    var mp = new BMap.Map("container");//创建地图
    mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 10);//设置中心点
    mp.enableScrollWheelZoom(true);

    var canvasLayer = new BMap.CanvasLayer({
        update: update
    });
    function initLoc() {

        // var data = [
        //     new BMap.Point(116.297047,39.979542),
        //     new BMap.Point(116.321768,39.88748),
        //     new BMap.Point(116.494243,39.956539)
        // ];

        //----  获取后台经纬度数据
        var points = [];
        $.ajax({
            url:"/controller_api/message",
            type:"post",
            dataType:"json",
            data:{},
            async:false,
            success:function(obj){
                $.each(obj, function (index, value) {
                    points.push({"x":value.x,"y":value.y,"url":value.url});
                });
            },
            error:function (obj) {
                alert("error")
            }
        });
        return points;
    }

    function update() {
        var data = initLoc();
        var ctx = this.canvas.getContext("2d");//指定为二维绘图，并返回一个环境对象

        if (!ctx) {
            return;
        }

        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);//对象清空

        var temp = {};
        ctx.fillStyle = "rgba(50, 50, 255, 0.7)";
        ctx.beginPath();

        for(var index=0; index<data.length; index++) {
            // alert("data:"+data[index].url);
            var pixel = mp.pointToPixel(data[index]);
            ctx.fillRect(pixel.x, pixel.y, 30, 30);
            var point = new BMap.Point(data[index].x, data[index].y); //将标注点转化成地图上的点
            var marker = new BMap.Marker(point);//将点转化成标注点
            mp.addOverlay(marker);  //将标注点添加到地图上
            (function () {
                // alert("----")
                var thePoint = data[index];
                marker.addEventListener("click",
                    function () {
                        showInfo(this, thePoint)
                    });
            })();
        }
    }


    function showInfo(thisMarker,point) {
        var sContent =
            '<ul style="margin:0 0 5px 0;padding:0.2em 0">'
            +'<li style="line-height: 26px;font-size: 15px;">'
            +'<span style="width: 50px;display: inline-block;">id：</span>' + point.x + '</li>'
            +'<li style="line-height: 26px;font-size: 15px;">'
            +'<span style="width: 50px;display: inline-block;">名称：</span>' + point.y + '</li>'
            +'<li style="line-height: 26px;font-size: 15px;"><span style="width: 50px;display: inline-block;">查看：</span><a href="'+point.url+'">详情</a></li>'
            +'</ul>';
        var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
        thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
    }
    mp.addOverlay(canvasLayer);
</script>

源者鬼道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图开发者js_api引入

示例代码如下：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-sc...
复制链接

扫一扫