地图初始化
用腾讯地图的前端插件，做了一个简单的地图，包含了地图选点，搜索位置并更新的功能，先来看看效果图。
首先看一下HTML结构如下
<div id="pointAddress">
<div class="searchAddress">
<div class="addressInput">
<div>
<input type="text" value=" " id="addressText" class="addressText">
</div>
<div>
<div class="search_btn" id="search_btn">
</div>
</div>
</div>
<button class="button_bnt" id="selPoint" type="button">
确认选点
</button>
</div>
<ul id="search_results" class="search_results"></ul>
<div id="pointMap">
<div id="container" style="width:100%; height:570px"></div>
</div>
页面布局就简单做了下，样式这里就不做调整了。
地图的初始化如下所示
var map = new qq.maps.Map(document.getElementById("container"), {
center: center, // 地图的中心地理坐标。
zoom: 16,
});
这里的获取的DOM就是地图的容器，zoom是缩放级别，数字越大，缩放的越大。在使用地图之前需要引入文件。
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
<!--前端自动定位接口-->
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
获取当前位置
获取当前位置可以通过getLocation方法获取，他有两个必填的回调，和一个设置时限的选填参数。
//获取当前位置
var geolocation = new qq.maps.Geolocation("yourkey", "wirelessdata");
function showPosition(position) {
lat = position.lat;
lng = position.lng;
init(lat, lng);
}
function showErr() {
init(lat, lng);
}
geolocation.getLocation(showPosition, showErr, {
option: 1000
});
showPosition方法返回当前的地理坐标，将当前地理坐标重新设置为地图中心点，就可以实现打开地图时，为当前定位的地理位置。
地图选点
地图选点的实现过程，主要通过给地图添加点击事件，获取到点击的坐标位置，并给marker重新设置坐标，通过geocoder类实现坐标与位置的转换。并将转换之后的位置描述信息显示到输入框中。
var marker = new qq.maps.Marker({
position: center,
map: map
});
//坐标与位置装换
var geocoder = new qq.maps.Geocoder({
complete: function(result) {
/*console.log(result);*/
var district = result.detail.addressComponents.district; //区
var street = result.detail.addressComponents.street; //街道
var streetNumber = result.detail.addressComponents.streetNumber; //门牌号
$("#addressText").val(district + street + streetNumber);
}
});
var latLng = new qq.maps.LatLng(lat, lng);
geocoder.getAddress(latLng);
qq.maps.event.addListener(
map,
'click',
function(event) {
let clickLng = event.latLng.getLng();
let clickLat = event.latLng.getLat();
currentAddress = new qq.maps.LatLng(clickLat, clickLng);
marker.setPosition(currentAddress); //重新设置marker坐标位置
geocoder.getAddress(currentAddress); //点击之后的地址信息
}
);
搜索引擎实现
通过输入的字段返回关联的信息，将关联的地理位置坐标存到li标签的属性，在点击li 标签时，获取data-的属性，拿到地理坐标重新渲染地图。
//创建搜素引擎
searchService = new qq.maps.SearchService({
complete: function(results) {
$("#search_results").html("");
var pois = results.detail.pois; //搜索返回的数据
//判断是否有地址信息
for (let i = 0; i < pois.length; i++) {
if (pois[i].address) {
$("#search_results").append(" <li class='searchList' data-lat = " + pois[i].latLng.lat + " data-lng = " + pois[i].latLng.lng + "><p class='largeFont'>" + pois[i].name + "</p><p class='smallFont'>" + pois[i].address + "</p></li>");
} else {
$("#search_results").append(" <li class='searchList' data-lat = " + pois[i].latLng.lat + " data-lng = " + pois[i].latLng.lng + "><p class='largeFont'>" + pois[i].name + "</p></li>");
}
}
//点击搜索之后的地址
$(".searchList").each(function() {
$(this).bind("click", function() {
let listValue = $(this).children(".largeFont").html();
let listLat = $(this)[0].dataset.lat;
let listLng = $(this)[0].dataset.lng;
$("#search_results").html("");
init(listLat, listLng);
})
})
}
})
//点击搜索开始检索
$("#search_btn").bind('click', function() {
let valueInput = $("#addressText").val();
searchService.search(valueInput);
})
判断输入完成后搜索
//判断输入是否完成
var flag = true;
$("#addressText").on("compositionstart", function() {
flag = false;
});
$("#addressText").on("compositionend", function() {
flag = true;
});
$("#addressText").on("input", function() {
setTimeout(function() {
if (flag) {
var valueInput = $("#addressText").val();
searchService.search(valueInput);
}
}, 1000)
});
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>腾讯地图</title>
</head>
<style>
.searchAddress {
display: flex;
}
.button_bnt {
height: 34px;
width: 80px;
}
.addressText {
height: 30px;
width: 260px;
}
</style>
<body>
<div id="pointAddress">
<div class="searchAddress">
<div class="addressInput">
<div>
<input type="text" value=" " id="addressText" class="addressText">
</div>
<div>
<div class="search_btn" id="search_btn">
</div>
</div>
</div>
<button class="button_bnt" id="selPoint" type="button">
确认选点
</button>
</div>
<ul id="search_results" class="search_results"></ul>
<div id="pointMap">
<div id="container" style="width:100%; height:570px"></div>
</div>
</div>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=VFABZ-Z5OCX-TKP4U-ZHOJU-BKCXH-A3BWP"></script>
<!--前端自动定位接口-->
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script src="jquery-3.2.1.js"></script>
<script>
$(function() {
var lat = 40.302080;
var lng = 116.640620;
var myAddress;
var currentAddress;
var addressValue;
var searchInput //搜索的value
function init(lat, lng) {
var center = new qq.maps.LatLng(lat, lng);
//定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
var map = new qq.maps.Map(document.getElementById("container"), {
center: center, // 地图的中心地理坐标。
zoom: 16,
});
var marker = new qq.maps.Marker({
position: center,
map: map
});
//坐标与位置装换
var geocoder = new qq.maps.Geocoder({
complete: function(result) {
/*console.log(result);*/
var district = result.detail.addressComponents.district; //区
var street = result.detail.addressComponents.street; //街道
var streetNumber = result.detail.addressComponents.streetNumber; //门牌号
$("#addressText").val(district + street + streetNumber);
}
});
var latLng = new qq.maps.LatLng(lat, lng);
geocoder.getAddress(latLng);
qq.maps.event.addListener(
map,
'click',
function(event) {
let clickLng = event.latLng.getLng();
let clickLat = event.latLng.getLat();
currentAddress = new qq.maps.LatLng(clickLat, clickLng);
marker.setPosition(currentAddress); //重新设置marker坐标位置
geocoder.getAddress(currentAddress); //点击之后的地址信息
}
);
}
//获取当前位置
var geolocation = new qq.maps.Geolocation("222BZ-XH6CU-FHUVF-4RRDN-DVRE7-FWFMX", "wirelessdata");
function showPosition(position) {
//console.log("susucess")
lat = position.lat;
lng = position.lng;
init(lat, lng);
}
function showErr() {
init(lat, lng);
}
geolocation.getLocation(showPosition, showErr, {
option: 1000
});
//创建搜素引擎
searchService = new qq.maps.SearchService({
complete: function(results) {
$("#search_results").html("");
var pois = results.detail.pois; //搜索返回的数据
//判断是否有地址信息
for (let i = 0; i < pois.length; i++) {
if (pois[i].address) {
$("#search_results").append(" <li class='searchList' data-lat = " + pois[i].latLng.lat + " data-lng = " + pois[i].latLng.lng + "><p class='largeFont'>" + pois[i].name + "</p><p class='smallFont'>" + pois[i].address + "</p></li>");
} else {
$("#search_results").append(" <li class='searchList' data-lat = " + pois[i].latLng.lat + " data-lng = " + pois[i].latLng.lng + "><p class='largeFont'>" + pois[i].name + "</p></li>");
}
}
//点击搜索之后的地址
$(".searchList").each(function() {
$(this).bind("click", function() {
let listValue = $(this).children(".largeFont").html();
let listLat = $(this)[0].dataset.lat;
let listLng = $(this)[0].dataset.lng;
$("#search_results").html("");
init(listLat, listLng);
})
})
}
})
//点击搜索开始检索
$("#search_btn").bind('click', function() {
let valueInput = $("#addressText").val();
searchService.search(valueInput);
})
$("#clear_btn").bind("click", function() {
$("#search_results").html("");
$("#addressText").val('');
$(this).hide().siblings().show();
})
//判断输入是否完成
var flag = true;
$("#addressText").on("compositionstart", function() {
flag = false;
//显示清空按钮
$("#clear_btn").show();
});
$("#addressText").on("compositionend", function() {
flag = true;
});
$("#addressText").on("input", function() {
setTimeout(function() {
if (flag) {
var valueInput = $("#addressText").val();
searchService.search(valueInput);
}
}, 1000)
});
})
</script>
</body>
</html>
扫一扫
2413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
