编写个调用腾讯地图来实现打开手机微信点击聊天的时候里面的网址链接的网页显示精准定位地址在文本框上的html代码
以下是一个使用腾讯地图API实现在网页中显示精准定位地址的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精准定位</title>
<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_TENCENT_MAP_API_KEY"></script>
</head>
<body>
<h1>精准定位</h1>
<div id="map" style="width: 100%; height: 400px;"></div>
<input type="text" id="address" placeholder="定位地址" readonly>
<script>
// 获取URL参数中的经纬度和地址
function getUrlParams() {
var urlParams = {};
var url = window.location.href;
var index = url.indexOf('?');
if (index !== -1) {
var paramsStr = url.substring(index + 1);
var paramsArr = paramsStr.split('&');
for (var i = 0; i < paramsArr.length; i++) {
var param = paramsArr[i].split('=');
urlParams[param[0]] = decodeURIComponent(param[1]);
}
}
return urlParams;
}
// 在地图上显示定位地址
function showAddressOnMap(address, lng, lat) {
var center = new qq.maps.LatLng(lat, lng);
var map = new qq.maps.Map(document.getElementById("map"), {
center: center,
zoom: 16
});
var marker = new qq.maps.Marker({
position: center,
map: map
});
document.getElementById("address").value = address;
}
// 页面加载完成后执行操作
window.onload = function() {
var urlParams = getUrlParams();
if (urlParams.address && urlParams.lng && urlParams.lat) {
showAddressOnMap(urlParams.address, urlParams.lng, urlParams.lat);
}
};
</script>
</body>
</html>
请将代码中的YOUR_TENCENT_MAP_API_KEY替换为您自己的腾讯地图API密钥。此代码会从URL参数中获取地址、经度和纬度,并在地图上显示该地址,并将地址填充到文本框中。可以通过在URL中添加address、lng和lat参数来传递地址和坐标信息。例如:http://yourwebsite.com/?address=北京市海淀区&lng=116.397128&lat=39.916527
原文地址: https://www.cveoy.top/t/topic/h20v 著作权归作者所有。请勿转载和采集!