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

时间:2021-10-08 00:48:24

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

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

效果如下:

百度地图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.创建地图,根据城市名称

百度地图API示例之小实践 添加代理商标注
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);
}
百度地图API示例之小实践 添加代理商标注

3.添加导航

百度地图API示例之小实践 添加代理商标注
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);
}
百度地图API示例之小实践 添加代理商标注

4.逐个添加代理商标记

百度地图API示例之小实践 添加代理商标注
$.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);
})
百度地图API示例之小实践 添加代理商标注
百度地图API示例之小实践 添加代理商标注
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); // 可以添加多种事件类型
}
百度地图API示例之小实践 添加代理商标注

5.为标记添加点击事件

百度地图API示例之小实践 添加代理商标注
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');
}
百度地图API示例之小实践 添加代理商标注

6.添加自定义控件--测距

百度地图API示例之小实践 添加代理商标注
// 定义一个控件类,即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示例之添加&sol;删除工具条、比例尺控件

    代码 <!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. Javascript的自执行函数

    自执行函数其实也就是"立即执行的函数",它有四个特点:提高性能.利于压缩.避免冲突.依赖加载: 1.减少作用域查找 JS代码: // Anonymous function that ...

  2. git在分支上创建目录和文件

    创建一个空目录,在其中初始化git git init 创建一个新文件,此时默认在master分支上 touch file1.txt add到staging area git add file1.txt ...

  3. HDU 3047 Zjnu Stadium&lpar;带权并查集&rpar;

    题意:有一个环形体育场,有n个人坐,给出m个位置关系,A B x表示B所在的列在A的顺时针方向的第x个,在哪一行无所谓,因为假设行有无穷个. 给出的座位安排中可能有与前面矛盾的,求有矛盾冲突的个数. ...

  4. sql server 调优----索引缺失

    SELECT mig.index_group_handle, mid.index_handle, CONVERT (decimal (28,1), migs.avg_total_user_cost * ...

  5. &lpar;转&rpar;Maven实战(六)依赖

    我们项目中用到的jar包可以通过依赖的方式引入,构建项目的时候从Maven仓库下载即可. 1. 依赖配置    依赖可以声明如下: <project> ... <dependenci ...

  6. C&num;程序设计六大原则记录

    本文目的在于记录,方便以后的回顾 http://www.uml.org.cn/sjms/201211023.asp 设计模式六大原则(1):单一职责原则 定义:不要存在多于一个导致类变更的原因.通俗的 ...

  7. HDU-5340 Three Palindromes(字符串哈希)

    http://acm.hdu.edu.cn/showproblem.php?pid=5340 orz到了新的字符串hash姿势 #include<cstdio>#include<cs ...

  8. 深入vue - 源码目录及构建过程分析

     公众号原文链接:深入vue - 源码目录及构建过程分析   喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」 ​“ 本文主要梳理一下vue代码的目录,以及vue代码构建流程,旨在对vue源码整 ...

  9. android常犯错误记录(三)

    java.lang.IndexOutOfBoundsException: Inconsistency detected. Invalid view holder adapter positionVie ...

  10. python redis存入字典序列化存储

    在python中通过redis hset存储字典时,必须主动把字典通过json.dumps()序列化为字符串后再存储, 不然hget获取后将无法通过json.loads()反序列化为字典 序列化存储 ...