腾讯地图应用
- 向地图添加一个圆
#导入JS
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
#内置CSS
<style type="text/css">
html,body{
width:100%;
height:100%;
}
#container{
width:100%;
height:100%;
}
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
</style>
#绑定标签
<body onload="initMap()">
<div id="container"></div>
#JS方法
<script>
function initMap(){
const center = setCenter(39.982163, 116.306070);
var map = new qq.maps.Map(container, {
center: center,
zoom: 14
});
const circle = new qq.maps.Circle({
map: map,
center: center,
radius: 1000,
fillColor: new qq.maps.Color(41, 91, 255, 0.16),
strokeColor: new qq.maps.Color(41, 91, 255, 1),
strokeWeight: 1
});
qq.maps.event.addListener(map, 'click', function(event) {
let lat=event.latLng.lat.toFixed(6);
let lng=event.latLng.lng.toFixed(6);
circle.setCenter(setCenter(lat,lng));
});
}
function setCenter(lat,lng){
return new qq.maps.LatLng(lat,lng);
}
</script>
- 搜索附近兴趣点(pois)
#导入JS
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=place"></script>
#内置样式
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 80%;
}
#place{
width:200px;
padding:3px 4px;
}
</style>
#绑定标签
<body onload="init()">
<div id="container"></div>
<input type="text" id="place" /> 输入地址，自动完成<br><br>
#JS
<script>
function init() {
var map = new qq.maps.Map(document.getElementById("container"),{
center: new qq.maps.LatLng(39.916527,116.397128),
zoom: 13
});
//实例化自动完成
var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));
var keyword = "";
//调用Poi检索类。用于进行本地检索、周边检索等服务。
var searchService = new qq.maps.SearchService({
complete : function(results){
if(results.type === "CITY_LIST") {
searchService.setLocation(results.detail.cities[0].cityName);
searchService.search(keyword);
return;
}
var pois = results.detail.pois;
var latlngBounds = new qq.maps.LatLngBounds();
for(var i = 0,l = pois.length;i < l; i++){
var poi = pois[i];
latlngBounds.extend(poi.latLng);
var marker = new qq.maps.Marker({
map:map,
position: poi.latLng
});
marker.setTitle(poi.name);
}
map.fitBounds(latlngBounds);
}
});
//添加监听事件
qq.maps.event.addListener(ap, "confirm", function(res){
keyword = res.value;
searchService.search(keyword);
});
}
</script>
参考链接：https://www.likecs.com/show-740541.html
附件下载：