百度地圖地址解析地址生成標記 地址批量解析 把后台信息傳入地圖標記上簡單代碼示例

百度地圖解析，根據所填信息在地圖上生成標記點獲取經緯度
 // 百度地圖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 = {
        width: 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("您選擇地址沒有解析到結果!");
        }
    }, "北京市");
});