我已经使用Gmap3库创建了这个地图选择工具,我可以显示标记,但出于某种原因我无法显示阴影值。我已将图标和阴影值都放入变量中,以便您可以在需要时调用变量。任何帮助将不胜感激。
源脚本
$(document).ready(function() {
//////// GMAP3 JSON ARRAY ////////
var mapOpts = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
streetViewControl: false,
};
$(".gmap3").gmap3({
map:{
options: mapOpts
}
});
$.mapArray = function(){
$('#show_array').click(function(){
$('.gmap3').gmap3('clear', 'markers');
var coordinates = $("#geofenceCoords_array").val();
var jsonObj = jQuery.parseJSON(coordinates);
var addBtn = $("#show_array");
var iconValues =
new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default.png', //icon url
new google.maps.Size(28.0, 43.0),
new google.maps.Point(0, 0),
new google.maps.Point(14.0, 43.0));
var shadowValues =
new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default_shadow.png', //icon shadow url
new google.maps.Size(50.0, 43.0),
new google.maps.Point(0, 0),
new google.maps.Point(14.0, 43.0));
$(".gmap3").gmap3({
getlatlng:{
callback: function(results){
var markers=[];
$.each(jsonObj, function(i, item) {
var marker = new Object();
marker.lat = jsonObj[i].latitude;
marker.lng = jsonObj[i].longitude;
marker.options = new Object();
marker.options.icon = iconValues;
marker.options.shadow = shadowValues;
markers.push(marker);
});
$(".gmap3").gmap3({
marker:{
values: markers,
options: {draggable: false,
animation: google.maps.Animation.DROP
},
},
autofit:{maxZoom: 14},
});
}
}
});
});
}
//////// GMAP3 DRAG AND DROP ////////
$.mapDrop = function(){
var iconValues =
new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default.png', //icon url
new google.maps.Size(28.0, 43.0),
new google.maps.Point(0, 0),
new google.maps.Point(14.0, 43.0));
var shadowValues =
new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default_shadow.png', //icon shadow url
new google.maps.Size(50.0, 43.0),
new google.maps.Point(0, 0),
new google.maps.Point(14.0, 43.0));
function genId() {
return '' + (new Date()).getTime();
}
function addMarker(map, event) {
if (markerCount < 10) {
var uid = genId();
$(this).gmap3({
marker: {
latLng: event.latLng,
options: {
draggable: true,
animation: google.maps.Animation.DROP,
icon: iconValues,
shadow: shadowValues
},
events: {
click: function() {
clearMarker(uid);
},
dragend: listMarkers
},
id: uid
}
});
markerCount++;
listMarkers();
} else {
return false;
};
}
function listMarkers() {
$(".gmap3").gmap3({
get: {
all: true,
callback: function(results) {
var coords = '';
$("#geofenceCoords_dragndrop").empty();
$.each(results, function (i, marker) {
//$("#inputArray").append('{"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() + '},' + '<br>');
coords+= ' {"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() +'},\n';
});
$("#geofenceCoords_dragndrop").val('['+'\n'+coords.substr(0, (coords.length-2))+'\n]');
}
}
});
}
function clearMarker(uid) {
$('.gmap3').gmap3({
clear: {
id: uid,
callback: function() {
listMarkers();
markerCount--;
}
}
});
}
var markerCount = 0;
$(".gmap3").gmap3({
map: {
options: mapOpts,
events: {
click: addMarker
}
}
});
}
//////// GMAP3 ADDRESS ////////
$.mapAddress = function(){
var mapOpts = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
streetViewControl: false,
};
var iconValues =
new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default.png', //icon url
new google.maps.Size(28.0, 43.0),
new google.maps.Point(0, 0),
new google.maps.Point(14.0, 43.0));
var shadowValues =
new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default_shadow.png', //icon shadow url
new google.maps.Size(50.0, 43.0),
new google.maps.Point(0, 0),
new google.maps.Point(14.0, 43.0));
$(".gmap3").gmap3({
map:{
options: mapOpts
}
});
setTimeout(function() {
$('<span>').attr({ class: 'deleteIcon'}).appendTo(".gmap3");
}, 200);
$('#test-ok').click(function(){
var addr = $('#test-address').val();
if ( !addr || !addr.length ) return;
$(".gmap3").gmap3({
getlatlng:{
address: addr,
callback: function(results){
if ( !results ) return;
if (markerCount < 10) {
$(this).gmap3({
marker:{
latLng:results[0].geometry.location,
options:{
icon: iconValues,
shadow: shadowValues
},
map:{
center: true,
},
},
autofit:{maxZoom: 14},
});
listMarkers();
markerCount++;
$('#test-address').val("");
}else {
$('#test-address').val("limit Reached");
$('#test-address').css('color','red');
$('#test-address').attr('readonly','readonly');
return false;
};
}
}
});
});
function listMarkers() {
$(".gmap3").gmap3({
get: {
all: true,
callback: function(results) {
var coords = '';
//$("#geofenceCoords_address").val("");
$.each(results, function (i, marker) {
//$("#inputArray").append('{"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() + '},' + '<br>');
coords+= ' {"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() +'},\n';
});
$("#geofenceCoords_address").val('['+'\n'+coords.substr(0, (coords.length-2))+'\n]');
}
}
});
}
var markerCount = 0;
$('.gmap3').on('click', '.deleteIcon', function(){
//alert("Handler");
if(markerCount <= 10){
markerCount = 0;
}
$('.gmap3').gmap3('clear', 'markers');
$("#geofenceCoords_address").val('');
$('#test-address').val('');
$('#test-address').css('color','black');
$('#test-address').removeAttr('readonly');
});
$('#test-address').keypress(function(e){
if (e.keyCode == 13){
$('#test-ok').click();
}
});
}
//////// JSON ARRAY VALIDATION ////////
$('#geofenceCoords_array').on('focusout keyup', function (e) {
var fieldValue = $(this).val(),
json;
try {
json = JSON.parse(fieldValue);
if (json.length > 3) {
throw new Error("E_TOO_MANY_COORD");
}
_.each(json, function (coordinate) {
if (!_.has(coordinate, 'latitude') || !_.has(coordinate, 'longitude')) {
throw new Error("E_INVALID_COORD");
}
});
} catch (e) {
console.log(e.message);
// handle your invalid json and return to stop further execution
if (e.message === "E_TOO_MANY_COORD") {
$('#errorMessage').text("You cannot exeed more than 3 coordiniates");
$('#errorMessage').removeClass().addClass('error');
$('#show_array').removeClass().addClass('disabled');
} else if (e.message === "E_INVALID_COORD") {
$('#errorMessage').html("Please provide valid coordinate pairs:<br> [{\"latitude\":33.851871,\"longitude\":-84.364336}]");
$('#errorMessage').removeClass().addClass('warning');
$('#geofenceCoords_array').css({
'border': '1px solid black'
});
$('#show_array').removeClass().addClass('disabled');
}
return;
}
$('#arrayNum').text(json.length);
$('#errorMessage').removeClass().addClass("hide");
$('#show_array').removeClass().addClass('enabled');
$('#errorMessage').text("");
$('#geofenceCoords_array').css({
'border': '1px solid black'
});
if ($('#arrayNum').text() == 0) {
$('#show_array').removeClass().addClass('disabled');
}
});
$('#geofenceCoords_array').on('focusout mouseout', function (e) {
var fieldValue = $(this).val(),
json;
if (e.which === 8) return;
try {
json = JSON.parse(fieldValue);
} catch (e) {
console.log(e.message);
if (e instanceof SyntaxError) {
$('#errorMessage').text("Please use valid json");
$('#errorMessage').removeClass().addClass('error');
$('#geofenceCoords_array').css({
'border': '1px solid red'
});
$('#show_array').removeClass().addClass('disabled');
}
if (fieldValue === "") {
$("#arrayNum").text("0");
$('#geofenceCoords_array').css({
'border': '1px solid black'
});
$('#show_array').removeClass().addClass('disabled');
$('#errorMessage').removeClass().addClass('hide');
}
return;
}
});
$('html,body').on('mousemove', function (e) {
var fieldValue = $("#geofenceCoords_array").val(),
json;
if (e.which === 8) return;
try {
json = JSON.parse(fieldValue);
} catch (e) {
console.log(e.message);
if (e instanceof SyntaxError) {
$('#errorMessage').text("Please use valid json");
$('#errorMessage').removeClass().addClass('error');
$('#geofenceCoords_array').css({
'border': '1px solid red'
});
$('#show_array').removeClass().addClass('disabled');
}
if (fieldValue === "") {
$("#arrayNum").text("0");
$('#geofenceCoords_array').css({
'border': '1px solid black'
});
$('#show_array').removeClass().addClass('disabled');
$('#errorMessage').removeClass().addClass('hide');
}
return;
}
});
//////// MAP TRANSITIONS ////////
$('#default_selection').prop("checked",true);
$('#default_selection').attr("checked",true);
$('#show_array').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) {
if($("#show_array").hasClass('enabled')){
$.mapArray();
}
});
$("[name=mapSelect]").change(function() {
$('.gmap3').gmap3('destroy');
if($(this).val() == 'JSONArray'){
$('.gmap3').attr("id","newId1");
$(".gmap3").gmap3({
map:{options: mapOpts}
});
$("#geofenceCoords_dragndrop").val("");
$("#geofenceCoords_address").val("");
$.mapArray();
}
if($(this).val() == 'dragnDrop'){
$('.gmap3').attr("id","newId2");
$(".gmap3").gmap3({
map:{options: mapOpts}
});
$("#geofenceCoords_array").val("");
$("#geofenceCoords_address").val("");
$.mapDrop();
}
if($(this).val() == 'addrSelect'){
$('.gmap3').attr("id","newId3");
$(".gmap3").gmap3({
map:{options: mapOpts}
});
$("#geofenceCoords_array").val("");
$("#geofenceCoords_address").val("");
$("#geofenceCoords_dragndrop").val("");
$.mapAddress();
}
});
});
答案 0 :(得分:1)
使用3.14 +版本的GMaps看起来不赞成使用阴影。织补。
来自:https://developers.google.com/maps/documentation/javascript/overlays#ComplexIcons
启用“可视刷新”模式时阴影将不可用,并且将在3.14版中弃用。
来自:Shadows on Google Maps visualRefresh
*您可以使用阴影创建标记图标。
或者为包含阴影的标记制作自定义叠加层(即不是google.maps.Marker对象)。
现在更多的工作,但仍然可能,因为它不再是默认行为*。