PianoTime/resources/views/admin/base/locations/index.blade.php

@extends('admin.layout')

@section('header')
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
<style>
	#location-container {
		min-width: 600px;
		min-height: 400px;
	}
	#search-location-container {
		position: absolute;
		bottom: 20px;
	}
</style>
@endsection

@section('content')
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="row">
		<div class="col-sm-12">
			<div id="location-container"></div>
		</div>
	</div>
	<div class="row" id="search-location-container">
		<div class="col-sm-8">
			<input class="form-control" type="text" id="location-keyword-input">
		</div>
		<div class="col-sm-4">
			<div class="btn btn-primary" id="location-keyword-search">搜索</div>
		</div>
	</div>
</div>
@endsection

@section('footer')
<script type="text/javascript">
$(function() {
    var map = new qq.maps.Map(document.getElementById('location-container'),{
        center: new qq.maps.LatLng('{{ $lat }}', '{{ $lng }}'),
        zoom: 13
    });
    //添加监听事件   获取鼠标单击事件
    qq.maps.event.addListener(map, 'click', function(event) {
        var marker = new qq.maps.Marker({
            position:event.latLng,
            map:map
        });

        qq.maps.event.addListener(map, 'click', function(event) {
            marker.setMap(null);
        });

        var searchService = new qq.maps.SearchService({
            panel:document.getElementById('location-keyword-search'),
            map : map
        });

        var regionText = $('#location-keyword-input').val();

        searchService.setLocation(regionText);
        searchService.search();
    });
});
</script>
@endsection