百度地图API示例之小实践 添加代理商标注
2015-11-30 14:56
337 查看
地图坐标无非是经度纬度。
每个代理商都有他的经度纬度参数,就能够在地图上标注出来了。
效果如下:
功能包括
标记代理商
显示导航
显示距离
测量距离
点击选中等
其中测距用到的是自定义控件
地图根据城市名称进行定位,省市联动可以获取城市名称。
1.引入文件
2.创建地图,根据城市名称
3.添加导航
4.逐个添加代理商标记
5.为标记添加点击事件
6.添加自定义控件--测距
每个代理商都有他的经度纬度参数,就能够在地图上标注出来了。
效果如下:
功能包括
标记代理商
显示导航
显示距离
测量距离
点击选中等
其中测距用到的是自定义控件
地图根据城市名称进行定位,省市联动可以获取城市名称。
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); }
相关文章推荐
- 强制重启XenServer中无响应的虚拟机
- 强制重启XenServer中无响应的虚拟机
- Unix 版权历史
- ping失败,如果在路由表main内没有entry
- 解决Android中点击过快造成重复事件问题
- UIViewController加载不出来/XIB加载不出来的问题总结
- iCCP: Not recognizing known sRGB profile that has been edited错误
- pl SQL32位客户端无法连接64位数据库解决办法
- clearcase常用命令
- linux查看网卡驱动
- 无线网卡模式【2】
- 字符设备 register_chrdev_region()、alloc_chrdev_region() 和 register_chrdev()
- postgresql cluster和correlation
- 设计模式解析与实战之原型模式
- Memcached的学习与使用
- activemq的插件编写
- 源码推荐(11.30B):最流行的 NavigationController,新手引导页面效果
- LibSVM-windows
- LibSVM-windows
- 协方差的意义和计算公式