js根据经纬度获取地理位置信息并标注在地图上

最新推荐文章于 2024-01-10 18:24:19 发布

variation8

最新推荐文章于 2024-01-10 18:24:19 发布

阅读量4.8k

点赞数 2

分类专栏： HTML JS 文章标签： html5 css3

本文链接：https://blog.csdn.net/qq_31151123/article/details/118389261

版权

HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" rel="external nofollow" />
<title>根据经纬度获取地址信息-百度地图API</title>

<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
padding: 0px;
margin: 0px;
}

.info_ul {
margin: 0 0 5px 0;
padding: 0.2em 0;
}

.info_ui_img {
background-image: url("images/error.png");
background-position: 97% 0%;
background-repeat: no-repeat;
background-size: 50px;
}

.info_ui_Nimg {
background-image: url("images/carNormal.png");
background-position: 97% 0%;
background-repeat: no-repeat;
background-size: 40px;
}

.info_li {
line-height: 26px;
font-size: 15px;
color: #0C8816;
}

.info_lierr {
line-height: 26px;
font-size: 15px;
color: #D81E06;
border: none;
}

.info_span {
width: 80px;
display: inline-block;
}

.btn {
width: 80px;
text-align: center;
height: 30px;
line-height: 30px;
border-radius: 5px;
cursor: pointer;
background-color: #D81E06;
color: #fff;
margin: 0 auto;
}

.ta-c {
text-align: center;
margin-top: 10px;
}
       #r-result {
       width: 100%;
       font-size: 14px;
       position: absolute;
       top: 10px;
       left: 200px
       }
</style>
</head>

// 在指定容器创建地图实例并设置最大最小缩放级别
var map = new BMap.Map("container", {
minZoom: 1,
maxZoom: 50
});
//初始化地图，设置中心点和显示级别
map.centerAndZoom(new BMap.Point(104.017174,30.628997), 15);

//开启鼠标滚轮缩放功能，仅对PC上有效
map.enableScrollWheelZoom(true);

// 将控件（平移缩放控件）添加到地图上
map.addControl(new BMap.NavigationControl());
       // 弹出并获取经纬度
       function submit() {
           var lng = document.getElementById('lng');
           var lat = document.getElementById('lat');
           alert("经度：" + lng.value + "\n" + "纬度：" + lat.value);

// 数据赋值
var points = [{
"lng": lng.value,
"lat": lat.value,
"type": "故障",
"name": "ET930071255",
"place": "成都武侯区大合仓"
},{
"lng": 104.017174,
"lat": 30.628988,
"type": "正常",
"name": "ET930071255",
"place": "成都武侯区大合仓22"

}
       ];
//添加标注
addMarker(points);
       };
// 创建图标对象
function addMarker(points) {
var point, marker;
// 创建标注对象并添加到地图
for (var i = 0, pointsLen = points.length; i < pointsLen; i++) {
point = new BMap.Point(points[i].lng, points[i].lat);
var myIcon;
// 判断正常或者故障，根据不同装填显示不同Icon
if (points[i].type == "故障") {
myIcon = new BMap.Icon("images/fault.png", new BMap.Size(32, 32), {
// 指定定位位置
offset: new BMap.Size(16, 32),
// 当需要从一幅较大的图片中截取某部分作为标注图标时，需要指定大图的偏移位置
//imageOffset: new BMap.Size(0, -12 * 25)
});
} else {
myIcon = new BMap.Icon("images/normal.png", new BMap.Size(32, 32), {
// 指定定位位置
offset: new BMap.Size(16, 32),
// 当需要从一幅较大的图片中截取某部分作为标注图标时，需要指定大图的偏移位置
//imageOffset: new BMap.Size(0, -12 * 25)
});
};
// 创建一个图像标注实例
marker = new BMap.Marker(point, {
icon: myIcon
});
// 将覆盖物添加到地图上
map.addOverlay(marker);

//给标注点添加点击事件
(function() {
var thePoint = points[i];
marker.addEventListener("click", function() {
showInfo(this, thePoint);
});
})();
}
};

//显示信息窗口，显示标注点的信息
function showInfo(thisMaker, point) {
var sContent = '';
if (point.type == "故障") {
sContent += '<ul class="info_ul info_ui_img">';
sContent += ' <li class="info_lierr">';
sContent += ' <span class="info_span">出车状态：</span>';
sContent += ' <span>' + point.type + '</span>';
sContent += ' </li>';
sContent += ' <li class="info_lierr">';
sContent += ' <span class="info_span">机器编号：</span>';
sContent += ' <span>' + point.name + '</span>';
sContent += ' </li>';
sContent += ' <li class="info_lierr">';
sContent += ' <span class="info_span">所在地点：</span>';
sContent += ' <span>' + point.place + '</span>';
sContent += ' </li>';
sContent += ' <li class="ta-c info_lierr">';
sContent += ' <div class="btn" οnclick=func("' + point.name + '")>' + "检修" + '</div>';
sContent += ' </li>';
sContent += '</ul>';
} else {
sContent += '<ul class="info_ul info_ui_Nimg">';
sContent += ' <li class="info_li">';
sContent += ' <span class="info_span">出车状态：</span>';
sContent += ' <span>' + point.type + '</span>';
sContent += ' </li>';
sContent += ' <li class="info_li">';
sContent += ' <span class="info_span">机器编号：</span>';
sContent += ' <span>' + point.name + '</span>';
sContent += ' </li>';
sContent += ' <li class="info_li">';
sContent += ' <span class="info_span">所在地点：</span>';
sContent += ' <span>' + point.place + '</span>';
sContent += ' </li>';
sContent += '</ul>';
}

// 创建信息窗口对象
var infoWindow = new BMap.InfoWindow(sContent);

//图片加载完毕重绘infowindow
thisMaker.openInfoWindow(infoWindow);
};

// 弹窗增加点击事件
function func(data) {
alert("点击了机器编号为：" + data + "\n已经提交检修");
}
</script>

</body>

</html>

variation8

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
2
评论
js根据经纬度获取地理位置信息并标注在地图上

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" rel="external nofollow" /> &l...
复制链接

扫一扫