在函数调用上重绘Google Maps Circle和Marker

时间:2016-07-21 00:21:11

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

我正在撰写一个网络应用程序,在Google地图上围绕一个标记显示一个圆圈。 placeMarker(location, radius)location设置一个标记,并将半径与圆绑定。我希望每次调用placeMarker时脚本都会重绘Circle和Marker。当我在控制台中尝试它时,它会使用新位置重新绘制标记,但保留原始圆半径。还会打印undefined。我需要改变什么才能使其正常工作?

var map;
var marker;

function placeMarker(location, radius) {
    if (typeof radius === 'undefined') { radius = initialRadius; }

    if (marker) {
        marker.setPosition(location);
    } else {
        marker = new google.maps.Marker({
            position: location,
            map: map,
            draggable: true
        });
    }

    var circle = new google.maps.Circle({
        map: map,
        radius: radius,
        fillColor: '#AA0000',
    });

    circle.bindTo('center', marker, 'position');
}


function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 0, lng: 0},
        zoom: 1
    });

    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng);
    });

    google.maps.event.addDomListener(window, "resize", function () {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });
}

1 个答案:

答案 0 :(得分:1)

您需要做与您的标记类似的操作。也就是说,而不是创建一个新的publicDatabase.fetchAllSubscriptionsWithCompletionHandler { (subscriptions: [CKSubscription]?, error: NSError?) in if error != nil { print("-> cloudKitSubscribeToChat - fetch subscription error") } else { print("-> cloudKitSubscribeToChat - fetch subscription no error") if subscriptions?.count == 0 { print("-> cloudKitSubscribeToChat - subscription count = 0, create") subscribe() } else { print("-> cloudKitSubscribeToChat - subscription count > 0, create") var exists = false for subscription in subscriptions! { print("-> cloudKitSubscribeToChat - subscription compare, \(subscriptionUpdate.notificationInfo!.alertBody) = \(subscription.notificationInfo!.alertBody)") if subscriptionUpdate.notificationInfo!.alertBody == subscription.notificationInfo!.alertBody { print("-> cloudKitSubscribeToChat - subscription count > 0, exists = true") exists = true } else { print("-> cloudKitSubscribeToChat - subscription count > 0, exists = false") } } if exists == false { print("-> cloudKitSubscribeToChat - subscription do not exists, create") subscribe() } else { print("-> cloudKitSubscribeToChat - subscription already exists") result(error: nil) } } } 对象并将其绑定到地图。您需要使用circle api重新定位现有的圈子。

查看:
https://developers.google.com/maps/documentation/javascript/reference#Circle

不幸的是,你没有在这里设置JSFiddle,否则我可以尝试为你修复它。但是,您的代码应该看起来像这样。

circle.setCenter(latlng)