|
| xqd
@@ -135,10 +135,94 @@
|
|
|
</div>
|
|
|
<!-- /.col-lg-10 -->
|
|
|
</div>
|
|
|
+
|
|
|
+ <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>
|
|
|
<!-- /.row -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+<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>
|
|
|
@endsection
|
