• 百度地图地址解析地址生成标记 地址批量解析 把后台信息传入地图标记上简单代码示例



    百度地图解析,根据所填信息在地图上生成标记点获取经纬度
    // 百度地图API功能
     var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(114.316, 30.581), 11); // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
    map.setCurrentCity("武汉"); // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    var point = new BMap.Point(114.316, 30.581);
    var geoc = new BMap.Geocoder();
    map.centerAndZoom(point, 12);
    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();
    // 将地址解析结果显示在地图上,并调整地图视野
    var task_address = document.getElementById("taskAddress");
    document.getElementById("taskAddress").addEventListener('blur', function () {
    map.clearOverlays(); //清除之前的标记
    myGeo.getPoint(task_address.value, function (point) {
    if (point) {
    geoc.getLocation(point, function (rs) {
    console.log(rs.point);
    var addComp = rs.addressComponents;
    var addPoint = rs.point;
    var addAddress = rs.address;
    document.getElementById("taskAddress").value = addAddress;
    document.getElementById("taskHor").value = addPoint.lat;
    document.getElementById("taskVer").value = addPoint.lng;
    document.getElementById("taskProvince").value = addComp.province;
    document.getElementById("taskCity").value = addComp.city;
    document.getElementById("taskArea").value = addComp.district;
                //根据经纬度生成标记
    var new_point = new BMap.Point(addPoint.lng,addPoint.lat);
    var marker = new BMap.Marker(new_point); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中
    map.panTo(new_point);
    });

    } else {
    alert("您选择地址没有解析到结果!");
    }
    }, "武汉市");
    }, false);
    map.addEventListener("click", function (e) {
    var pt = e.point;
    geoc.getLocation(pt, function (rs) {
    var addComp = rs.addressComponents;
    var addPoint = rs.point;
    var addAddress = rs.address;
    document.getElementById("taskAddress").value = addAddress;
    document.getElementById("taskHor").value = addPoint.lat;
    document.getElementById("taskVer").value = addPoint.lng;
    document.getElementById("taskProvince").value = addComp.province;
    document.getElementById("taskCity").value = addComp.city;
    document.getElementById("taskArea").value = addComp.district;
    // alert(addAddress);
    });
    });

    百度地图把后台查询的数据集成到地图页面上,生成多个标记,即批量解析实例
    // 百度地图API功能
    var map = new BMap.Map("allmap"); // 创建Map实例
    map.centerAndZoom(new BMap.Point(114.316, 30.581), 11); // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
    map.setCurrentCity("武汉"); // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    var list_value = $('#list_value').val();//后台查询所得
    var str = JSON.parse(list_value);
    $.each(str, function (k, v) {
    var data_info = [[v.task_ver, v.task_hor, v.task_address]];
    var opts = {
    300, // 信息窗口宽度
    height: 100, // 信息窗口高度
    title: "<div><a href='/task/" + v.id + "'target='blank'>" +
    "<div class='map_text'>" +
    "<h6>" + v.title + "</h6>" +
    "<div>" +
    "<span>" + "类别:" + v.task_type_name + " " + "</span>" +
    "<span>" + "分类:" + v.cate_name + "" + "</span>" +
    "</div>" +
    "<div>" +
    "<span>" + "预算:¥" + v.min_bounty + "-" + v.max_bounty + "" + "</span>" +
    "<span>" + "截止时间:" + v.delivery_deadline + "" + "</span>" +
    "</div>" +
    "</div>" +
    "</a><div>", // 信息窗口标题
    enableMessage: true//设置允许信息窗发送短息
    };
    for (var i = 0; i < data_info.length; i++) {
    var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1])); // 创建标注
    var content = data_info[i][2];
    map.addOverlay(marker); // 将标注添加到地图中
    addClickHandler(content, marker);
    }
    function addClickHandler(content, marker) {
    marker.addEventListener("click", function (e) {
    openInfo(content, e)
    }
    );
    }

    function openInfo(content, e) {
    var p = e.target;
    var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
    var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
    map.openInfoWindow(infoWindow, point); //开启信息窗口
    }
    })
    //一个页面集成多个地图
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398, 39.897445);
    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    map.centerAndZoom(point, 12);
    var geoc = new BMap.Geocoder("allmap");
    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();
    // 将地址解析结果显示在地图上,并调整地图视野
    $('.js_map').click(function () {
    var province = $("#province").find("option:selected").text();
    var city = $("#province_check").find("option:selected").text();
    var area = $("#area_check").find("option:selected").text();
    var customer_address = $("input[name='customer_address']").val();
    var address_detail = province + city + area + customer_address;
    myGeo.getPoint(address_detail, function (point) {
    if (point) {
    geoc.getLocation(point, function (rs) {
    $("input[name='task_lat']").val(rs.point.lat);
    $("input[name='task_lng']").val(rs.point.lng);
    });
    map.centerAndZoom(point, 16);
    map.addOverlay(new BMap.Marker(point));
    } else {
    alert("您选择地址没有解析到结果!");
    }
    }, "北京市");
    });
    //物流信息地图
    var map1 = new BMap.Map("l_allmap"); // 创建Map实例
    var point1 = new BMap.Point(116.331398, 39.897445);
    map1.addControl(new BMap.MapTypeControl()); //添加地图类型控件
    map1.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    var geoc1 = new BMap.Geocoder();
    map1.centerAndZoom(point1, 12);
    // 创建地址解析器实例
    var myGeo1 = new BMap.Geocoder();
    // 将地址解析结果显示在地图上,并调整地图视野
    $('.js_map1').click(function () {
    var info_address = $("input[name='info_address']").val();
    myGeo1.getPoint(info_address, function (point) {
    if (point) {
    geoc1.getLocation(point, function (rs) {
    $("input[name='info_lat']").val(rs.point.lat);
    $("input[name='info_lng']").val(rs.point.lng);
    });
    map1.centerAndZoom(point, 16);
    map1.addOverlay(new BMap.Marker(point));
    } else {
    alert("您选择地址没有解析到结果!");
    }
    }, "北京市");
    });
     
     
  • 相关阅读:
    Java 数据类型转换
    Perl 日期时间函数(date time)
    find a filename from a filehandle in Perl
    Perl文件读写
    R语言算术运算和逻辑运算
    bash/shell 数学计算
    grep/awk/sed 或者 并且 否定
    关于打印 毕业设计资料
    python 捕获 shell/bash 脚本的输出结果
    推荐几个高质量的图片素材网站
  • 原文地址:https://www.cnblogs.com/chen1970s/p/7735299.html
Copyright © 2020-2023  润新知