当前位置：网站首页>JS obtain geographic location information according to longitude and latitude and mark it on the map

JS obtain geographic location information according to longitude and latitude and mark it on the map

2022-06-13 08:45:00 【variation8】

<!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> Obtain address information according to longitude and latitude - Baidu Maps 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>

<body>

<div id="container"></div>
   
   <div id="r-result">
   longitude :
   <input type="text" id="lng" /> latitude ：
   <input type="text" id="lat" />
   <button οnclick="submit()"> Submit </button>
   </div>

<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.3&services=true"></script>

<script type="text/javascript">

// Create a map instance in the specified container and set the maximum and minimum zoom levels
var map = new BMap.Map("container", {
minZoom: 1,
maxZoom: 50
});
// Initialize map , Set the center point and display level
map.centerAndZoom(new BMap.Point(104.017174,30.628997), 15);

// Turn on the mouse wheel zoom function , Only on PC On the effective
map.enableScrollWheelZoom(true);

// Put control （ Pan zoom control ） Add to map
map.addControl(new BMap.NavigationControl());
       // Pop up and get latitude and longitude
       function submit() {
           var lng = document.getElementById('lng');
           var lat = document.getElementById('lat');
           alert(" longitude ：" + lng.value + "\n" + " latitude ：" + lat.value);

// Data assignment
var points = [{
"lng": lng.value,
"lat": lat.value,
"type": " fault ",
"name": "ET930071255",
"place": " Dahechang, Wuhou District, Chengdu "
},{
"lng": 104.017174,
"lat": 30.628988,
"type": " normal ",
"name": "ET930071255",
"place": " Dahechang, Wuhou District, Chengdu 22"

}
       ];
// Add labels
addMarker(points);
       };
// Create icon object
function addMarker(points) {
var point, marker;
// Create dimension objects and add them to the map
for (var i = 0, pointsLen = points.length; i < pointsLen; i++) {
point = new BMap.Point(points[i].lng, points[i].lat);
var myIcon;
// Judge whether it is normal or faulty , The display is different according to different loading Icon
if (points[i].type == " fault ") {
myIcon = new BMap.Icon("images/fault.png", new BMap.Size(32, 32), {
// Specify the positioning position
offset: new BMap.Size(16, 32),
// When you need to capture a part from a larger picture as a callout icon , You need to specify the offset position of the large drawing
//imageOffset: new BMap.Size(0, -12 * 25)
});
} else {
myIcon = new BMap.Icon("images/normal.png", new BMap.Size(32, 32), {
// Specify the positioning position
offset: new BMap.Size(16, 32),
// When you need to capture a part from a larger picture as a callout icon , You need to specify the offset position of the large drawing
//imageOffset: new BMap.Size(0, -12 * 25)
});
};
// Create an image annotation instance
marker = new BMap.Marker(point, {
icon: myIcon
});
// Add a cover to the map
map.addOverlay(marker);

// Add a click event to the marked point
(function() {
var thePoint = points[i];
marker.addEventListener("click", function() {
showInfo(this, thePoint);
});
})();
}
};

// Display the information window , Display information about dimension points
function showInfo(thisMaker, point) {
var sContent = '';
if (point.type == " fault ") {
sContent += '<ul class="info_ul info_ui_img">';
sContent += ' <li class="info_lierr">';
sContent += ' <span class="info_span"> Departure status ：</span>';
sContent += ' <span>' + point.type + '</span>';
sContent += ' </li>';
sContent += ' <li class="info_lierr">';
sContent += ' <span class="info_span"> Machine number ：</span>';
sContent += ' <span>' + point.name + '</span>';
sContent += ' </li>';
sContent += ' <li class="info_lierr">';
sContent += ' <span class="info_span"> Location ：</span>';
sContent += ' <span>' + point.place + '</span>';
sContent += ' </li>';
sContent += ' <li class="ta-c info_lierr">';
sContent += ' <div class="btn" οnclick=func("' + point.name + '")>' + " Overhaul " + '</div>';
sContent += ' </li>';
sContent += '</ul>';
} else {
sContent += '<ul class="info_ul info_ui_Nimg">';
sContent += ' <li class="info_li">';
sContent += ' <span class="info_span"> Departure status ：</span>';
sContent += ' <span>' + point.type + '</span>';
sContent += ' </li>';
sContent += ' <li class="info_li">';
sContent += ' <span class="info_span"> Machine number ：</span>';
sContent += ' <span>' + point.name + '</span>';
sContent += ' </li>';
sContent += ' <li class="info_li">';
sContent += ' <span class="info_span"> Location ：</span>';
sContent += ' <span>' + point.place + '</span>';
sContent += ' </li>';
sContent += '</ul>';
}

// Create information window object
var infoWindow = new BMap.InfoWindow(sContent);

// After the picture is loaded, redraw infowindow
thisMaker.openInfoWindow(infoWindow);
};

// Pop up window to add click event
function func(data) {
alert(" Click on the machine number ：" + data + "\n It has been submitted for overhaul ");
}
</script>

</body>

</html>

原网站

版权声明
本文为[variation8]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202270538126378.html

当前位置：网站首页>JS obtain geographic location information according to longitude and latitude and mark it on the map

JS obtain geographic location information according to longitude and latitude and mark it on the map

边栏推荐

猜你喜欢

随机推荐