除了最后一件事之外，我在Google地图V3上的所有工作都是关于我希望的。现在，如果您加载地图，地图就可以搜索地点并将地图外部的图标拖到Google地图中。 然而，一旦图标在地图内，我就无法拖动它。我无休止地搜索我的代码出错的地方。
以下是我读过的许多例子：
Link1， Link2，Link3，Link4（链接4是我需要的，但在进一步检查后无法连接代码）
我觉得我很亲密，但我相信我只是没有声明正确的变量或没有正确连接它们。 以下是代码，这里有一个FIddle，可以让您了解我的问题。 （尝试拖动图标一次，然后在地图内再次拖动它）
<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html {
height: 100%;
}
body {
height: 97%;
}
#map-canvas {
width: 70%;
height: 100%;
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -30%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#shelf {
position: absolute;
margin-right: 5px;
top: 25px;
left: 70%;
height: 98%;
width: 30%;
float: right;
}
#draggable {z-index:1000000000;}
#draggable2 {z-index:1000000000;}
#draggable3 {z-index:1000000000;}
.ecostation {
margin-left: auto;
margin-right: auto;
border: 1.0px solid #F0F0F0;
border-radius: 5.0px 5.0px 5.0px 5.0px;
width: 85%;
text-align: center;
}
#wrapper {
display: table-row;
border: 1.0px solid rgb(204,204,204);
border-radius: 5.0px 5.0px 5.0px 5.0px;
}
#wrapper div {
display: table-cell;
border-radius: 10.0px 10.0px 10.0px 10.0px;
width: 12.5%;
}
#wrapper div img {
display: block;
padding: 5.0px;
margin: 5.0px auto;
text-align: center;
}
#wrapper div h5, #wrapper div p {
text-align: center;
font-size: 11px;
margin-top: -10px;
font-weight: 800;
}
.title {
margin-left: 7%;
color: #F0F0F0;
font-weight: 600;
}
#target {
width: 345px;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
$("#draggable2").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
});
</script>
<script>
// This example adds a search box to a map, using the
// Google Places autocomplete feature. People can enter geographical searches.
// The search box will return a pick list containing
// a mix of places and predicted search terms.
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each plce, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// [END region_getplaces]
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>
<div id='shelf'>
<div class="ecostation">
<div id="wrapper">
<div>
<img src="https://cdn1.iconfinder.com/data/icons/mobile-development-icons/30/Map_marker.png" id="draggable" title="Estation Trash/Compost" alt="Estation Trash and Compost"/>
<p>Trash/Compost</p>
</div>
<div>
<img src="https://cdn1.iconfinder.com/data/icons/large-tab-bar-icons/30/Start_flag.png" id="draggable2" title="Estation Trash" alt="Estation Trash"/>
<p>Trash</p>
</div>
<div>
<img src="http://i1288.photobucket.com/albums/b489/Wallace_Adams/bth_facebook-icon-30x30_zpsb49e1af3.jpg" id="draggable3" title="Estation Recycling" alt="Estation Recycling"/>
<p>Recycle</p>
</div>
</div>
</div>
</div>
</html>
如果你们能让我知道这将是伟大的！另外，我注意到marker被声明了两次。这是问题之一吗？我试着宣布别的东西，但没有运气。
我也遇到过这段代码，但不确定它是否对这种情况有帮助
var overlay;
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
可能认为它必须对下面这段代码做些什么？
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
但是再一次，无法弄清楚出了什么问题，我是否正确连接变量？
非常感谢帮助，我非常接近完成我想在这张地图上完成的工作
答案 0 :(得分：0)
检查以确保您没有使用svg图像作为图标。它们似乎适用于FireFox和Chrome，但不适用于IE