【问题标题】:Google maps api update circle accuracy谷歌地图api更新圆精度
【发布时间】:2017-06-23 15:46:52
【问题描述】:

基本上,当用户移动时,我的地图标记会更新,但是我看不到半径圆变大或变小。怎么可能呢?另外,如何添加动画,以便当用户移动时,标记也随之移动?

$(document).ready(function() {
var map;

      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var icons = {
          parking: {
            icon: iconBase + 'parking_lot_maps.png'
          },
          library: {
            icon: iconBase + 'library_maps.png'
          },
          info: {
            icon: iconBase + 'info-i_maps.png'
          }
        };
function initializeMap(){
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 19,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}
function locError(error) {
// the current position could not be located
    alert("The current position could not be found!");
}
function setCurrentPosition(position) {
    var accuracy = position.coords.accuracy;
    currentPositionMarker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude
        ),
        title: "Current Position",
        center: position,
        icon: iconBase + 'parking_lot_maps.png',
        animation: google.maps.Animation.DROP
    });
    map.panTo(new google.maps.LatLng(
        position.coords.latitude,
        position.coords.longitude
    ));
        var circle = new google.maps.Circle({
        map: map,
  radius: accuracy,    // 10 miles in metres
  fillColor: '#AA0000'
});

circle.bindTo('center', currentPositionMarker, 'position')
}

function displayAndWatch(position) {
    // set current position
    setCurrentPosition(position);
    // watch position
    watchCurrentPosition(position);
}
function watchCurrentPosition(position) {
    var positionTimer = navigator.geolocation.watchPosition(
        function (position) {
            setMarkerPosition(
            currentPositionMarker,
            position,
        )
    });
}
function setMarkerPosition(marker, position) {
    accuracy = position.coords.accuracy;
    marker.setPosition(
        new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude)
    );
        map.panTo(new google.maps.LatLng(
        position.coords.latitude,
        position.coords.longitude
    ));

}
function initLocationProcedure() {
    initializeMap();
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
        }else{
            alert("Your browser does not support the Geolocation API");
    }
}

$(document).ready(function() {
    initLocationProcedure();
});

【问题讨论】:

    标签: javascript jquery google-maps animation google-maps-api-3


    【解决方案1】:
    function setMarkerPosition(marker, position) {
        circle.setRadius( position.coords.accuracy );
        ....
    }
    

    【讨论】:

    • 动画怎么样?
    • 看看这个:stackoverflow.com/questions/10904476/… 或类似的,基本上制作你自己的循环来移动它的过渡。另一种选择是识别标记 html 元素并使用正确的 css 选择器,过渡到顶部和左侧属性(或任何谷歌用来定位其标记的东西)
    • 我尝试根据问题做类似的事情,但它不起作用,你能提供一个例子吗?我希望它慢慢移动(滑动)
    • 你的意思是css? .js 选项是在我提供的链接中开发的。
    猜你喜欢
    • 2013-11-26
    • 1970-01-01
    • 2013-02-23
    • 2019-05-24
    • 2011-03-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多