缩放到地图而不更改值

时间:2017-09-21 04:39:01

标签: javascript google-maps google-maps-api-3 google-maps-markers google-maps-api-2

我正在使用谷歌地图API,到目前为止它看起来非常好,但我现在面临的问题是当我初始化地图并在地图上设置标记时,一切似乎工作正常但现在当我改变放大一些点击或任何改变地图上的值的东西,即重新初始化整个地图。

这是HTML代码:

<div class="map-area" id="map-area">
        <a id="map-spinner" href="javascript:;" class="btn btn-primary " style="    margin-left: 50%;
margin-top: 20%;">
            <span>.</span>
            <div class="loader show">
                <div class="loading-circles">
                    <div class="circle hold"></div>
                    <div class="circle first"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                </div>
                <img src="{{asset('images/logo-icon.svg')}}">
            </div>
        </a>
    </div>

这是第一次初始化时的javascript:

 var getMap = function (format) {
        var request=null;
        if(format){
            if(format == 'all'){
                request = $.ajax({
                    url:app.Config.getApiUrl() + 'get-map-count',
                    method:'POST'
                });
            }else{
                request = $.ajax({
                    url:app.Config.getApiUrl() + 'get-map-count',
                    method:'POST',
                    data:{format:format}
                });
            }
        }else{
            request = $.ajax({
                url:app.Config.getApiUrl() + 'get-map-count',
                method:'POST'
            });
        }
        request.done(function (response) {
            var mapLat = 0;
            var mapLng = 0;

            if(response.count.length > 0){
                $('#empty-map-image').css('display' , 'none');
                $('#map-area').show();
                mapLat =  response.last_shared_file ? response.last_shared_file.lat : response.count[0].lat;
                mapLng =  response.last_shared_file ? response.last_shared_file.lng : response.count[0].lng;
            }else{
                  $('#empty-map-image').show();
                  $('#map-area').css('display' , 'none');
            }

            $('#map-spinner').hide();
            google.load(function (google) {
                var map = new google.maps.Map(document.getElementById('map-area'), {
                    zoom: 15,
                    center: {lat: parseFloat(mapLat), lng: parseFloat(mapLng)}
                });
                $.each(response.count, function (k,v) {

                    var latLng = {lat: parseFloat(v.lat), lng: parseFloat(v.lng)};

                    var icon_url = $.getSrcOfFormat(v.format.toLowerCase());

                    var icon = {
                        url: icon_url, // url
                        scaledSize: new google.maps.Size(32, 40), // scaled size
                        origin: new google.maps.Point(0,0), // origin
                        labelOrigin:new google.maps.Point(30,0)
                    };
                    var label = v.count.toString();
                    var marker = new google.maps.Marker({
                        position: latLng,
                        map: map,
                        icon:icon,
                        label: label,
                        title: v.count.toString()
                    });
                    var radius = parseFloat(v.radius);
                    radius = (radius * 1000);
                    var circle = new google.maps.Circle({
                        map: map,
                        radius: radius,
                        fillColor: '#7ad458',
                        strokeColor: "#4a7938",
                        strokeOpacity: .35,
                        strokeWeight: 2,
                        fillOpacity: .2
                    });
                    circle.bindTo('center', marker, 'position');
                });
            });
        }).fail(function (err) {
            $('#map-area').html('<p>Unable to load map at this time.</p>')
        });
    };

这是我后来得到的:

enter image description here

这是我到目前为止所做的。

var map = $('#map-area');
map.locationpicker("location", {latitude: 24.8647309, longitude: 67.0879642,radius:1000});

它会删除我在地图上的所有标记并重新初始化它。

0 个答案:

没有答案