地图坐标无非是经度纬度。
每个代理商都有他的经度纬度参数，就能够在地图上标注出来了。
效果如下：
功能包括
标记代理商
显示导航
显示距离
测量距离
点击选中等
其中测距用到的是自定义控件
地图根据城市名称进行定位，省市联动可以获取城市名称。
1.引入文件
<script type="text/javascript" src="http://api./api?v=2.0&ak=sSelQoVi2L3KofLo1HOobonW"></script><script type="text/javascript" src="http://api./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.添加自定义控件--测距
// 定义一个控件类,即functionfunction ZoomControl() { // 这是js类// 默认停靠位置和偏移量this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;this.defaultOffset = new BMap.Size(10, 10);}// 通过JavaScript的prototype属性继承于BMap.ControlZoomControl.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);}
