百度地图显示多点连线+数字标注
程序员文章站
2022-07-13 21:09:19
...
百度地图显示多点连线+数字标注
<!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>
- 百度地图多点_画连接线_数字标注.zip (2.2 KB)
- 下载次数: 15
上一篇： Ditto剪贴簿工具中文躺倒问题
下一篇： 百度地图api
推荐阅读
-
百度地图显示多点连线+数字标注
-
百度地图显示多点连线+数字标注
-
iOS(swift) 百度地图 标注，气泡，弹出层 一直显示 显示多个（自定义BMKAnnotationView）
-
vue实现百度地图坐标与input框地址的双向绑定（点击地图改变标注位置且具体位置显示在input框或input框中输入地址失去焦点后能在地图中定位）
-
ios百度地图开发之显示标注
-
php+js实现百度地图多点标注
-
php+js实现百度地图多点标注的方法
-
php+js实现百度地图多点标注的方法
-
iOS(swift) 百度地图 标注，气泡，弹出层 一直显示 显示多个（自定义BMKAnnotationView）
-
php+js实现百度地图多点标注