richod
/
wenchuangh5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>地图</title>
    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-2.1.1.min.js"></script>
</head>
<body>
<div style="display: inline-block;vertical-align: top;width: 45%">
    <div class="form-group row map">
        <div class="offset-2 col-9">
            <div class="input-group" style="margin-top: 20px;">
                <input class="form-control region" type="text" placeholder="城市">
                <span class="input-group-addon ">和</span>
                <input class="form-control keyword" type="text" placeholder="关键字">
                <a class="input-group-addon search" href="javascript:">搜索</a>
            </div>
            <div class="text-info">搜索时城市和关键字必填</div>
            <div class="text-info">点击地图上的蓝色点，获取经纬度</div>
            <div class="text-danger map-error mb-3" style="display: none">错误信息</div>
            <div id="container" style="min-width:600px;min-height:600px;"></div>
        </div>
    </div>
</div>

</body>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YGZBZ-QSKCU-7LGVI-2WWXU-E5YEJ-2WFBA" ></script>
<script>
var searchService, map, markers = [];
//        window.onload = function(){
//直接加载地图
//初始化地图函数  自定义函数名init
function init() {
//定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
var map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(39.916527, 116.397128),      // 地图的中心地理坐标。
zoom: 15                                                 // 地图的中心地理坐标。
});
var latlngBounds = new qq.maps.LatLngBounds();
//调用Poi检索类
searchService = new qq.maps.SearchService({
complete: function (results) {
var pois = results.detail.pois;
$('.map-error').hide();
if (!pois) {
$('.map-error').show().html('关键字搜索不到，请重新输入');
return;
}
for (var i = 0, l = pois.length; i < l; i++) {
(function (n) {
var poi = pois[n];
latlngBounds.extend(poi.latLng);
var marker = new qq.maps.Marker({
map: map,
position: poi.latLng,
});

marker.setTitle(n + 1);

markers.push(marker);
//添加监听事件
qq.maps.event.addListener(marker, 'click', function (e) {
var address = poi.address;
$("input[name='address']").val(address);
$("input[name='longitude']").val(e.latLng.lng);
$("input[name='latitude']").val(e.latLng.lat);
});
})(i);
}
map.fitBounds(latlngBounds);
}
});
}
//清除地图上的marker
function clearOverlays(overlays) {
var overlay;
while (overlay = overlays.pop()) {
overlay.setMap(null);
}
}
function searchKeyword() {
var keyword = $(".keyword").val();
var region = $(".region").val();
clearOverlays(markers);
searchService.setLocation(region);
searchService.search(keyword);
}

//调用初始化函数地图
init();


//        }
</script>
<script>
$(document).on('click', '.search', function () {
    searchKeyword();
})
</script>
</html>