<!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>
相关推荐
在压缩包中的`百度地图多点+画连接线+数字标注.html`文件,很可能是包含了实现这一功能的HTML页面,里面包含了上述所有提到的代码和配置。通过分析这个文件,我们可以学习如何将各个知识点整合到实际项目中。如果你...
在本文中,我们将探讨如何使用PHP和JavaScript来实现百度地图上的多点标注功能。这个方法主要涉及两个步骤:首先在PHP端生成JSON数据,然后在JavaScript端解析并使用这些数据来在地图上显示标注。 1. **PHP创建JSON...
百度地图搜索+标注点
这样,地图上就会显示一条连接所有点的线,代表运动轨迹。为了区分起始和结束点,可以为起点和终点创建特殊的标记,或者使用不同颜色或样式的`Polyline`。 在项目"**Bmap-master**"中,可能包含了实现以上功能的...
这通常涉及解析轨迹数据(例如GPS坐标),然后使用百度地图API的`BMap.Polyline`类创建折线对象,将一系列坐标点连接起来,形成轨迹线。 - 轨迹数据可以是JSON格式,包含一系列的经纬度坐标对,如`[ [lng1, lat1], ...
本文将深入探讨如何使用百度地图API显示多个标注点,并结合jQuery库来优化用户体验。 首先,百度地图API(Baidu Maps API)是百度公司提供的一项免费服务,它允许开发者在其网站上集成地图功能,包括定位、地图展示...
调用百度地图API实现加点/加线/加标注/加动画/加控件/拖拽放大缩小等基本功能
1. **百度地图API**:百度地图API是百度提供的一套用于开发地图应用的接口,它允许开发者在自己的网页或应用程序中嵌入地图,并进行一系列操作,如定位、标注、路线规划等。在这个项目中,我们主要用到了地图显示和...
总结来说,百度地图自定义标注是通过利用百度地图API创建个性化的地图元素,这需要开发者具备JavaScript编程基础和对百度地图API的理解。通过实践和学习提供的示例,开发者可以轻松掌握这一技术,实现地图服务的创新...
本项目名为“百度地图定位+搜索定位+列表展示”,其主要目标是实现基于百度地图API的定位功能,并结合搜索功能,将搜索结果以列表的形式展示给用户。下面将详细阐述这个项目所涉及的技术点及其重要性。 首先,我们...
开发者可以通过百度地图API来集成地图功能到自己的应用程序中,实现自定义地图样式、添加标注、路径规划等功能。 其次,ECharts是一款由百度开源的、轻量级的JavaScript数据可视化库,支持多种图表类型,如折线图、...
这个Demo涵盖了基本的地图显示、定位、标注、路线规划等多种功能,是开发基于百度地图API的应用时的重要参考资料。通过运行这个Demo,开发者可以直观地看到各个功能的实际效果,并学习其背后的实现代码。 首先,要...
在本文中,我们将深入探讨如何在C#与Visual Studio 2010环境下,通过后台交互调用百度地图API来实现一系列地图功能,包括标注、测距、画轨迹以及画圆。这些功能对于地理信息系统(GIS)应用或者任何需要地图可视化...
百度地图标注数据量不大,希望直接读取excle生成标注;同时会有修改、编辑的需求。 项目分析 项目的没有难点,只有复杂度。如果是将标注信息固定在json或js文件中,即可实现;但是对于非编程人员,进行修改或者编辑...
本篇文章将深入探讨“百度地图在范围内标注点”的相关知识点,旨在帮助开发者和用户理解如何在百度地图平台上有效地进行位置标记。 首先,我们要了解什么是百度地图。百度地图是一款由中国互联网巨头百度公司推出的...
百度地图连线功能,顾名思义,是百度地图API提供的一项服务,允许开发者通过指定的地理位置坐标(经度和纬度)在地图上绘制轨迹线。这项功能通常用于展示移动对象的运动路径,例如车辆行驶轨迹、行人的行走路线等。...
在本项目中,我们主要探讨如何在百度地图API中实现点击地图上的标注点后弹出信息窗口的功能。这个功能在很多应用中都很常见,比如地理信息系统、导航软件、位置服务等,它能帮助用户获取地图上特定位置的详细信息。...