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

百度地图API实践

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30299709

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/ldms/p/5842127.html

本文介绍如何使用百度地图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); }