直接上代碼:需要將自己的map key加到下面js引用位置。本人親測可用。搞了半天,大家多支持阿!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key="></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
width: 100%;
}
body div {
}
#container {
height:450px;
}
</style>
</head>
<body onload="init()">
<div id="container" ></div>
<div id="fitBoundsDiv"></div>
<div id="tips" style="padding:10px 10px;height:20px;color:#888;font-size:12px;">
溫馨提醒:可以拖動地圖調整當前位置
</div>
<div id="centerDiv" style="padding:10px 10px;height:40px;"></div>
<div style="height: 38px;"><button>One Key</button></div>
<div id="zoomDiv"></div>
<div id="containerDiv"></div>
<div id="mapTypeIdDiv"></div>
<div id="projection"></div>
<script type="text/javascript">
var jqqGeocoder = null;
function triggerGeocoder(center){
if(jqqGeocoder){
//逆向解析地址
jqqGeocoder.getAddress(center);
}
}
function init() {
var width = $("#container").width();
var height = $("#container").height();
var container = document.getElementById("container");
var centerDiv = document.getElementById("centerDiv");
//初始化地圖
var center = new qq.maps.LatLng(39.911495541850535, 116.40345412944171);
var map = new qq.maps.Map(container, {
// 地圖的中心地理座標
center: center,
zoom: 16
});
//逆向獲取地址信息
jqqGeocoder = new qq.maps.Geocoder({
complete : function(result){
//更新form地址
//$("#address").val(result.detail.address);
//alert(result.detail.address);
//debugger;
centerDiv.innerHTML = "當前定位:<br>"+result.detail.address;
//console.log(result.detail.location);
}
});
triggerGeocoder(center);
map.panTo(center);
//創建自定義控件
var middleControl = document.createElement("div");
middleControl.style.left= ((width)/2-20)+"px";
middleControl.style.top=(height/2-38)+"px";
middleControl.style.position="relative";
middleControl.style.width="36px";
middleControl.style.height="36px";
middleControl.style.zIndex="100000";
middleControl.innerHTML ='<img src="https://www.cdlhome.com.sg/mobile_assets/images/icon-location.png" />';
document.getElementById("container").appendChild(middleControl);
//返回地圖當前中心點地理座標
//centerDiv.innerHTML = "地址定位中..." + map.getCenter();
centerDiv.innerHTML = "地址定位中......";
//當地圖中心屬性更改時觸發事件
qq.maps.event.addListener(map, 'center_changed', function() {
setTimeout(function(){
triggerGeocoder(map.getCenter());
},2000);
centerDiv.innerHTML = "地址定位中...";
});
}
</script>
</body>
</html>