百度地图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);
}
百度地图API示例之小实践 添加代理商标注的更多相关文章
- 百度地图API示例:使用vue添加删除覆盖物
1.index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2. ...
- 百度地图API示例之设置级别setZoom与禁止拖拽disableDragging
百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别 <html> <head> <meta http-equiv="C ...
- 百度地图API示例之添加/删除工具条、比例尺控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之添加定位相关控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之添加自定义控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API多个点聚合时,标注添加的标签label地图刷新就丢失的问题解决
当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合A ...
- 百度地图API示例之设置地图显示范围
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API如何给自定义覆盖物添加事件
摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ --------- ...
- 百度地图API示例之移动地图
级别为6 级别为8 级别为12 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
随机推荐
- unset是不能清除保存在本地电脑上的cookie的,用于session就可以(弄了半天原来是这样)
unset($_COOKIE["historyWord[$wordId]"]); 这样是不行的,unset只是将变量在脚本运行时注销,但是cookie是写在客户端的,下一次还是可以 ...
- Ubuntu配置网络命令(转载)
From:http://blog.csdn.net/ithomer/article/details/6264881 以eth0为例 1. 以DHCP方式配置网卡 编辑文件: /etc/networ ...
- java反射生成ORM
package com.wzh.jdbc; import java.lang.reflect.Field;import java.sql.Connection;import java.sql.Prep ...
- 利用 Gitbook 生成文档中心站点
经过一个多月,Bugtags 最近上线了自己的文档站点:docs.bugtags.com,在这里你可以找到 Bugtags 集成.使用相关的绝大部分问题. 在这之前我们使用的是第三方提供的帮助中心产品 ...
- 初始化ArrayList的两种方法
方式一: ArrayList<String> list = new ArrayList<String>(); String str01 = String("str ...
- [ActionScript 3.0] AS3 双A字模型
package { import caurina.transitions.Tweener; import flash.display.Sprite; import flash.events.Mouse ...
- MD5加密Java实现
package cn.mldn.util; public class MD5Code { /* * 下面这些S11-S44实际上是一个4*4的矩阵,在原始的C实现中是用#define 实现的, 这里把 ...
- JAVA 中关于String的特性
一.初始化String的两种方式 String str1 = "hello"; String str2 = new String("hello"); 第一种方式 ...
- mysql 如何用root 登录
mysql -uroot -p 如果没有密码,按两下回车就进去了
- ArcGIS 通视分析工作原理
通过通视分析工具可根据在 3D 空间中相对于某表面或多面体要素类提供的障碍的位置,计算各线要素的第一个和最后一个折点之间的通视性.前一个折点定义为观测点,后一个折点为观测目标.沿着这些点之间的视线确定 ...