【发布时间】: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