谷歌地图laravel上圆圈的错误位置

时间:2016-05-16 11:32:20

标签: javascript google-maps laravel google-maps-api-3 geometry

我不是一张有圆圈的地图但是当我点击圆圈时,我总是出现在左上角。当我用标记替换圆圈时它工作正常。任何人都可以帮我吗?

var map;

var markers = {!! json_encode($maps) !!};

var marks = [];

function load() {

    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(51.2442266,22.5619917),
        zoom: 13
    });

    for(var i = 0; i < markers.length; i++){
        marks[i] = addMarker(markers[i]);
    }
}

function addMarker(marker){

    var id = marker.id;
    var lat = marker.lat;
    var lng = marker.lng;
    var PM10 = marker.PM10;
    var PM25 = marker.PM25;
    var date = marker.date;
    var index;
    var time = marker.time;
    var temp = marker.temp;
    var humidity = marker.humidity;

    var html = "1 2 3";


    var markerLatlng = new google.maps.LatLng(parseFloat(marker.lat),parseFloat(marker.lng));

    var mark = new google.maps.Circle({
        map: map,
        center : markerLatlng,
        radius :10,
        strokeColor:  '#9a0800',
        strokeWeight: 1,
        strokeOpacity:  1,
        fillColor:    '#9a0800',
        fillOpacity:  1,
    });

    var infoWindow = new google.maps.InfoWindow;
    google.maps.event.addListener(mark, 'click', function(){
        infoWindow.setContent(html);
        infoWindow.open(map, mark);
    });

    return mark;
}

1 个答案:

答案 0 :(得分:0)

infoWindow.open()的第二个参数应该是具有MVCObject - 属性的position,但google.maps.Circle没有position - 属性。

可能的解决方案: 向圈子添加position - 属性,例如通过bindTo

//add this line after the creation of mark
mark.bindTo('position', mark, 'center');