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

百度地图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);

}