騰訊地圖JSAPI開發demo 定位，查詢
阿新 • • 發佈：2019-05-10
data doctype ans 轉譯 暫時 地址查詢 erro 列表 事件
1.IP定位切換
2.點擊坐標獲取地點
3.查詢地點切換坐標
<!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 {
height: 90%;
width: 99%;
text-align: center;
}
</style>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=MJABZ-YGGL5-IBIIN-Q5Z45-FMOI7-VIBGN"></script>
<script src="jquery.min.js"></script>
<script>
//1. 通過傳入地址 定位到地址
//2. 通過查詢地址 地圖定位到地址
//3. 通過地圖點擊定位，獲取到具體地址
var MAP_GLOAP = {
CURR_MAP: [28.21409, 112.89173], //當前坐標
CURR_ADR: null, //當前地址
KEY: ‘MJABZ-YGGL5-IBIIN-Q5Z45-FMOI7-VIBGN‘,
map: null, //地圖對象
Maker: null, //標記（單個）
SearchInput: "#mapSearch",//查詢文本框
SearchBT: "#mapSearchBT" //查詢按鈕
};
//刷新查詢列表
var RefSearch = function () {
console.log(MAP_GLOAP);
$(MAP_GLOAP.SearchInput).val(MAP_GLOAP.CURR_ADR);
};
//增加打標
var AddMark = function () {
var center = new qq.maps.LatLng(MAP_GLOAP.CURR_MAP[0], MAP_GLOAP.CURR_MAP[1]);
if (MAP_GLOAP.Maker) {
MAP_GLOAP.Maker.setMap(null);
}
MAP_GLOAP.Maker = new qq.maps.Marker({
position: center,
map: MAP_GLOAP.map
});
};
//刷新坐標
var RefMap = function () {
var center = new qq.maps.LatLng(MAP_GLOAP.CURR_MAP[0], MAP_GLOAP.CURR_MAP[1]);
MAP_GLOAP.map.panTo(center);
}
//通過IP獲取定位
var IpMap = function () {
//如果有值的話就不需要重新定位
if( MAP_GLOAP.CURR_ADR) return;
var data = {
address: MAP_GLOAP.CURR_ADR,
key: MAP_GLOAP.KEY, //key為自己向騰訊地圖申請的密鑰
output: "jsonp"
};
var url = "http://apis.map.qq.com/ws/location/v1/ip";
$.ajax({
type: "get",
dataType: ‘jsonp‘,
data: data,
jsonp: "callback",
jsonpCallback: "QQmap",
url: url,
success: function (res) {
console.log(res);
if (res && res.result.location) {
MAP_GLOAP.CURR_MAP = [res.result.location.lat, res.result.location.lng];
//刷新坐標軸
RefMap();
//刷新maker
AddMark();
//刷新輸入框
RefSearch();
}
else {
alert("暫時沒有查到該地區，請重新在試下！");
}
},
error: function (err) {
alert("服務端錯誤，請刷新瀏覽器後重試");
}
});
}
//地址查詢
var SearchMap = function () {
//1.獲取地址名稱，轉譯坐標
//2.設置坐標，重新載入地圖
$(MAP_GLOAP.SearchBT).click(function () {
MAP_GLOAP.CURR_ADR = $(MAP_GLOAP.SearchInput).val();
if (!MAP_GLOAP.CURR_ADR || MAP_GLOAP.CURR_ADR < 0) {
alert("查詢數據不能為空");
}
var data = {
address: MAP_GLOAP.CURR_ADR,
key: MAP_GLOAP.KEY, //key為自己向騰訊地圖申請的密鑰
output: "jsonp"
};
var url = "http://apis.map.qq.com/ws/geocoder/v1/";
$.ajax({
type: "get",
dataType: ‘jsonp‘,
data: data,
jsonp: "callback",
jsonpCallback: "QQmap",
url: url,
success: function (res) {
console.log(res);
if (res && res.result.location) {
MAP_GLOAP.CURR_MAP = [res.result.location.lat, res.result.location.lng];
//刷新坐標軸
RefMap();
//刷新maker
AddMark();
//刷新輸入框
RefSearch();
}
else {
alert("暫時沒有查到該地區，請重新在試下！");
}
},
error: function (err) {
alert("服務端錯誤，請刷新瀏覽器後重試");
}
});
})
}
//初始化
var init = function () {
//定義map變量
MAP_GLOAP.map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(MAP_GLOAP.CURR_MAP[0], MAP_GLOAP.CURR_MAP[1]), // 地圖的中心地理坐標。
zoom: 10 // 地圖的中心地理坐標。
});
//添加監聽事件
qq.maps.event.addListener(MAP_GLOAP.map, ‘click‘, function (e) {
MAP_GLOAP.CURR_MAP = [e.latLng.getLat().toFixed(5), e.latLng.getLng().toFixed(5)];
var data = {
location: MAP_GLOAP.CURR_MAP[0] + ‘,‘ + MAP_GLOAP.CURR_MAP[1],
key: MAP_GLOAP.KEY, //key為自己向騰訊地圖申請的密鑰
get_poi: 0
};
var url = "http://apis.map.qq.com/ws/geocoder/v1/?";
data.output = "jsonp";
$.ajax({
type: "get",
dataType: ‘jsonp‘,
data: data,
jsonp: "callback",
jsonpCallback: "QQmap",
url: url,
success: function (res) {
console.log(res);
MAP_GLOAP.CURR_ADR = res.result.address;// `${res.result.address_component.province}${res.result.address_component.city}${res.result.formatted_addresses.recommend}`;
MAP_GLOAP.CURR_MAP = [res.result.location.lat, res.result.location.lng];
//刷新坐標軸
RefMap();
//刷新maker
AddMark();
//刷新輸入框
RefSearch();
},
error: function (err) {
// alert("服務端錯誤，請刷新瀏覽器後重試");
}
});
AddMark;
});
}
window.onload = function () {
//當前ip獲取地址
IpMap();
//初始化地圖函數 自定義函數名init
init();
//地址查詢功能
SearchMap();
}
</script>
</head>
<body>
<input type="text" value="" id="mapSearch"><button id="mapSearchBT" value="">查詢</button>
<!-- 顯示地圖的區域 -->
<div id="container"></div>
</body>
C# 直接可用模板：
//調用
騰訊地圖JSAPI開發demo 定位，查詢