社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>腾讯地图-简单地图示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
}
* {
margin: 0px;
padding: 0px;
}
body,
button,
input,
select,
textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p {
width: 603px;
padding-top: 3px;
overflow: hidden;
}
.btn {
width: 142px;
}
#container {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="container">
</div>
// 秘钥我删除了大部分,使用的时候替换成自己的就可以了
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=HVABZ-YPTCNWBMY
"></script>
<script type="text/javascript">
window.onload = function () {
//直接加载地图
//初始化地图函数 自定义函数名init
var address = '中国,湖北省,仙桃,市政府';
var geocoder = new qq.maps.Geocoder();
//对指定地址进行解析
geocoder.getLocation(address);
//设置服务请求成功的回调函数
geocoder.setComplete(function (result) {
console.log(result);
// 纬度
var lat = result.detail.location.lat;
// 经度
var lng = result.detail.location.lng;
console.log(lat);
console.log(lng);
//定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
var map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(lat, lng), // 地图的中心地理坐标。
zoom: 14 // 地图的中心地理坐标。
});
// 在这个位置添加一个覆盖物
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(lat, lng),
map: map
});
// 添加文本标注
var label = new qq.maps.Label({
position: new qq.maps.LatLng(lat, lng),
// 这个位置文本标注位置偏移使用
offset: new qq.maps.Size(-100, -0),
map: map,
content: '海淀区,西三环,广源闸5号广源大厦二层8222'
});
});
//若服务请求失败,则运行以下函数
geocoder.setError(function () {
alert("出错了,请输入正确的地址!!!");
});
}
};
</script>
</body>
</html>
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!