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: 380px;
	}
	#search-location-container {
		margin-bottom: 20px;
	}
</style>
@endsection

@section('content')
<div class="wrapper wrapper-content animated fadeInRight">
	<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 class="btn btn-success" id="my-location-btn">我的位置</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div id="location-container"></div>
		</div>
	</div>
	<input type="hidden" id="select-position-input" value="{{ $location }}">
</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
    });
    //添加监听事件   获取鼠标单击事件
    var init_marker = new qq.maps.Marker({
        position: new qq.maps.LatLng('{{ $lat }}', '{{ $lng }}'),
        map: map
    });
    qq.maps.event.addListener(map, 'click', function(event) {
        init_marker.setMap(null);
        var marker = new qq.maps.Marker({
            position: event.latLng,
            map:map
        });
		$('#select-position-input').val(event.latLng.lat + ',' + event.latLng.lng);
        qq.maps.event.addListener(map, 'click', function(event) {
            marker.setMap(null);
        });
    });

    var searchService = new qq.maps.SearchService({
        map : map
    });

    $('#location-keyword-search').on('click', function () {
        var regionText = $('#location-keyword-input').val();
        searchService.setLocation(regionText);
        searchService.search();
    });
    
    $('#my-location-btn').on('click', function () {
        console.log(navigator.geolocation);
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                console.log(position);
                var lat = position.coords.latitude;
                var lng = position.coords.longitude;
                console.log(lat, lng);
                //调用地图命名空间中的转换接口   type的可选值为 1:GPS经纬度，2:搜狗经纬度，3:百度经纬度，4:mapbar经纬度，5:google经纬度，6:搜狗墨卡托
                qq.maps.convertor.translate(new qq.maps.LatLng(lat, lng), 1, function(res){
                    //取出经纬度并且赋值
                    var latlng = res[0];
                    console.log(latlng);
                    var map = new qq.maps.Map(document.getElementById("container"), {
                        center:  latlng,
                        zoom: 13
                    });
                    //设置marker标记
                    var marker = new qq.maps.Marker({
                        map : map,
                        position : latlng
                    });
                });
            });
        }
        else {
            alert('浏览器不支持定位')
		}
    });
});
</script>
@endsection