百度地图API示例之小实践 添加代理商标注

 

地图坐标无非是经度纬度。

每个代理商都有他的经度纬度参数，就能够在地图上标注出来了。

效果如下：

功能包括

标记代理商

显示导航

显示距离

测量距离

点击选中等

 

其中测距用到的是自定义控件

地图根据城市名称进行定位，省市联动可以获取城市名称。

1.引入文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=sSelQoVi2L3KofLo1HOobonW"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>

2.创建地图，根据城市名称

var map = new BMap.Map("maparea");
if (district !== null) {
    var cityName = city + district;
    map.centerAndZoom(cityName, 11);
} else {
    var cityName = province + city;
    map.centerAndZoom(cityName, 11);
}

3.添加导航

function addControl(map) {
    var top_left_control = new BMap.ScaleControl({
        anchor: BMAP_ANCHOR_TOP_LEFT
    }); // 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE
    });
    map.addControl(top_left_navigation);
    map.addControl(top_left_control);
}

4.逐个添加代理商标记

$.each(json.data,
function(index, con) {
    opt_str += "<option value=" + con.id + " map_lng=" + con.map_lng + " map_lat=" + con.map_lat + ">" + con.name + " 电话:" + con.tel + "</option>";
    var point = new BMap.Point(con.map_lng, con.map_lat);
    var name = con.name;
    var tel = con.tel;
    addMarker(map, point, name, tel);
})

function addMarker(map, point, name, tel) {
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    var label = new BMap.Label("姓名:" + name + " 电话:" + tel, {
        offset: new BMap.Size(20, -10)
    });
    marker.setLabel(label);
    marker.setAnimation(BMAP_ANIMATION_BOUNCE);
    marker.addEventListener("click", attribute);
    //marker.addEventListener("mouseover",attribute); // 可以添加多种事件类型
}

5.为标记添加点击事件

function attribute(e) {
    var p = e.target;
    var map_lng = p.getPosition().lng;
    var map_lat = p.getPosition().lat;
    //alert(map_lng+','+map_lat);
    $('#agent_id option[map_lng="' + map_lng + '"][map_lat="' + map_lat + '"]').attr('selected', 'selected');
}

6.添加自定义控件--测距

// 定义一个控件类,即function
function ZoomControl() { // 这是js类
    // 默认停靠位置和偏移量
    this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
    this.defaultOffset = new BMap.Size(10, 10);
}

// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();

// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map) {
    // 创建一个DOM元素
    var div = document.createElement("div");
    // 添加文字说明
    div.appendChild(document.createTextNode("测距"));
    // 设置样式
    div.style.cursor = "pointer";
    div.style.border = "1px solid gray";
    div.style.backgroundColor = "white";
    // 绑定事件,点击一次放大两级
    div.onclick = function(e) {
        var myDis = new BMapLib.DistanceTool(map);
        myDis.open(); // 开启鼠标测距
    }
    // 添加DOM元素到地图中
    map.getContainer().appendChild(div);
    // 将DOM元素返回
    return div;
}

function measureDistance(map) {
    // 创建控件
    var myZoomCtrl = new ZoomControl();
    // 添加到地图当中
    map.addControl(myZoomCtrl);
}