<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>(按钮)</title>
</head>
<body >
<div>
<fieldset >
(附近11)
</fieldset>
<fieldset>
<div style="min-height: 400px; width: 100%;" id="map">
</div>
<script type="text/javascript">
var map; //Map实例
//后台传过来
var currentLat = 116.345555;
var currentLon = 40.018661;
var my ={ title: "我的位置"};
var markerArr = [
{ title: "1", point: "116.364531,40.057003"},
{ title: "2",point: "116.340934,40.013401"},
{ title: "3", point: "116.342213,40.041267"},
{ title: "4", point: "116.342223,40.042267"},
{ title: "5", point: "116.342233,40.043267"},
{ title: "6", point: "116.352243,40.044267"},
{ title: "7", point: "116.342253,40.045267"},
{ title: "8", point: "116.342263,40.046267"},
{ title: "9", point: "116.342273,40.047267"},
{ title: "10", point: "116.342283,40.087267"},
{ title: "11", point: "116.342293,40.097267"},
{ title: "12", point: "116.442203,40.007267"}
];
function map_init() {
map = new BMap.Map("map");
//第1步:设置地图中心点,当前城市
var point = new BMap.Point(currentLat,currentLon);
//第2步:初始化地图,设置中心点坐标和地图级别。
map.centerAndZoom(point, 14);
//第3步:启用滚轮放大缩小
map.enableScrollWheelZoom(true);
//第4步:向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//第5步:向地图中添加缩略图控件
var ctrlOve = new window.BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrlOve);
//第6步:向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);
//第7步:绘制点
for (var i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].point.split(",")[0];
var p1 = markerArr[i].point.split(",")[1];
var maker = addMarker(new window.BMap.Point(p0, p1), i);
addInfoWindow(maker, markerArr[i]);
}
//绘制点
var points = new Array();
for (var i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].point.split(",")[0];
var p1 = markerArr[i].point.split(",")[1];
var thePoint1 = new BMap.Point(p0, p1);
points.push(thePoint1);
}
drawPolyline(map, points);
// 添加信息窗口
function addInfoWindow(marker, poi) {
// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
var label = new window.BMap.Label(poi.title, { offset: new window.BMap.Size(2, 1) });
marker.setLabel(label);
var clo="";
if("我的位置"==poi.title){
clo="#FF5782";
}else{
clo="#E6FED";
}
label.setStyle({
color: "#fff",
fontSize: "16px",
backgroundColor: "0.05",
border: "0",
fontWeight: "bold"
});
//maps.addOverlay(lab1);
var info = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;color:"+clo+";’>" +poi.title+ "</p>"); // 创建信息窗口对象
marker.addEventListener("mouseover", openInfoWinFun);
var openInfoWinFun = function () {
this.openInfoWindow(info);
};
}
}
// 添加标注
function addMarker(point, index) {
index=11;
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0 - index * 25)
});
var marker = new BMap.Marker(point, { icon: myIcon });
map.addOverlay(marker);
return marker;
}
//异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
document.body.appendChild(load);
}
/**
* 画线
* @param bMap
* @param points
*/
function drawPolyline(bMap, points) {
if (points==null || points.length<=1) {
return;
}
bMap.addOverlay(new BMap.Polyline(points, {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.6
})); // 画线
}
window.onload = map_load;
</script>
</fieldset>
</div>
</body>
</html>
相关推荐
百度地图显示多点连线+数字标注 非常实用,我项目已经用了。大家用的好 一定要评论哦。
本文实例讲述了php+js实现百度地图多点标注的方法。分享给大家供大家参考,具体如下: 1.php创建json数据 $products = $this->product_db->select($where); $products_json = json_encode($products); 2.js传入...
百度地图搜索+标注点
1、获取多个坐标点标注在地图上 2、根据不同状态显示不同的信息窗口样式 3、根据地址检索坐标点(可显示多个) 4、鼠标点击抓取坐标 5、运动轨迹(标记起始位置和终点位置)
traceDraw.jsp画给定点的运动轨迹,personTraceMap.jsp根据位置数组画运动轨迹。person.png为自行准备的图标
实现了百度地图自定义标注,标注可以定义自己想要的图片。达到了和百度marker点击后弹出信息窗口的效果,里面有例子,和相应的图片共大家学习。
百度地图BMap+echats 扩展,提供html 、js文件。html文件目录中需有BMap字符串,否则不加载地图
高德地图标注+路线规划。里面代码详细,地图标注与路线实现。大家可以下载回去进行扩展。如:收索地址导航、语音提示等
调用百度地图API实现加点/加线/加标注/加动画/加控件/拖拽放大缩小等基本功能
百度地图在范围内标注点
利用百度地图sdk实现在当前位置xx米范围内进行标注,超出范围无法标注的demo.
百度地图标注数据量不大,希望直接读取excle生成标注;同时会有修改、编辑的需求。 项目分析 项目的没有难点,只有复杂度。如果是将标注信息固定在json或js文件中,即可实现;但是对于非编程人员,进行修改或者编辑...
C#VS2010下前后台交互调用百度地图API 实现标注、测距、画轨迹、画圆 项目源代码
android 百度地图开发 在地图上用已知经纬度标记一个 标注
C#读取本地TXT数据源数据,在百度地图上标注 可以设置城市Id,城市名字,坐标,地址,电话等信息 欢迎感兴趣用户下载
百度地图JavaScript API初始化地图创建标注
简单实用的jQuery自定义百度地图标注信息代码,支持鼠标自由拖拽、放大缩小地图,更换标注图标等。 实例参数 new BaiduMap({ id: "container1", title: { text: "北京故宫博物院", className: "title" }...