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

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

效果如下:

功能包括

标记代理商

显示导航

显示距离

测量距离

点击选中等

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

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

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);
}

百度地图API示例之小实践 添加代理商标注的更多相关文章

  1. 百度地图API示例:使用vue添加删除覆盖物

    1.index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2. ...

  2. 百度地图API示例之设置级别setZoom与禁止拖拽disableDragging

    百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别 <html> <head> <meta http-equiv="C ...

  3. 百度地图API示例之添加/删除工具条、比例尺控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  4. 百度地图API示例之添加定位相关控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  5. 百度地图API示例之添加自定义控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  6. 百度地图API多个点聚合时,标注添加的标签label地图刷新就丢失的问题解决

    当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合A ...

  7. 百度地图API示例之设置地图显示范围

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  8. 百度地图API如何给自定义覆盖物添加事件

    摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ --------- ...

  9. 百度地图API示例之移动地图

    级别为6 级别为8 级别为12 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

随机推荐

  1. unset是不能清除保存在本地电脑上的cookie的,用于session就可以(弄了半天原来是这样)

    unset($_COOKIE["historyWord[$wordId]"]); 这样是不行的,unset只是将变量在脚本运行时注销,但是cookie是写在客户端的,下一次还是可以 ...

  2. Ubuntu配置网络命令(转载)

    From:http://blog.csdn.net/ithomer/article/details/6264881 以eth0为例   1. 以DHCP方式配置网卡 编辑文件: /etc/networ ...

  3. java反射生成ORM

    package com.wzh.jdbc; import java.lang.reflect.Field;import java.sql.Connection;import java.sql.Prep ...

  4. 利用 Gitbook 生成文档中心站点

    经过一个多月,Bugtags 最近上线了自己的文档站点:docs.bugtags.com,在这里你可以找到 Bugtags 集成.使用相关的绝大部分问题. 在这之前我们使用的是第三方提供的帮助中心产品 ...

  5. 初始化ArrayList的两种方法

    方式一:  ArrayList<String> list = new ArrayList<String>();  String str01 = String("str ...

  6. [ActionScript 3.0] AS3 双A字模型

    package { import caurina.transitions.Tweener; import flash.display.Sprite; import flash.events.Mouse ...

  7. MD5加密Java实现

    package cn.mldn.util; public class MD5Code { /* * 下面这些S11-S44实际上是一个4*4的矩阵,在原始的C实现中是用#define 实现的, 这里把 ...

  8. JAVA 中关于String的特性

    一.初始化String的两种方式 String str1 = "hello"; String str2 = new String("hello"); 第一种方式 ...

  9. mysql 如何用root 登录

    mysql -uroot -p 如果没有密码,按两下回车就进去了

  10. ArcGIS 通视分析工作原理

    通过通视分析工具可根据在 3D 空间中相对于某表面或多面体要素类提供的障碍的位置,计算各线要素的第一个和最后一个折点之间的通视性.前一个折点定义为观测点,后一个折点为观测目标.沿着这些点之间的视线确定 ...