如何使用此Google 地图示例实现可拖动图标标记
到目前为止，我有以下代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places search box</title>
<style>
html, body, #map-canvas {
height: 93%;
width: 90%;
margin: 10px;
padding: 10px
}
#panel {
position: absolute;
top: 1%;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#target {
width: 345px;
}
#shelf{position:absolute; top: 0px; left:980px; height:100%;width:30%; float: right; background:white;opacity:0.7;}
#draggable {position:absolute; top:10px; left:10px; width: 30px; height: 30px;z-index:1000000000;}
</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);
}
});
});
</script>
<script type="text/javascript">
var $map;
var $latlng;
var overlay;
// 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(37.3333, -121.9000),
new google.maps.LatLng(37.3333, -121.9000));
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 place, 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);
});
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
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="shelf">
<img src="https://cdn1.iconfinder.com/data/icons/lightly-icons/30/location.png" id="draggable" title="Estation Trash/Compost" alt="Estation Trash and Compost"/>
</div>
<div id="map-canvas"></div>
<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>
</body>
</html>
如果加载代码，您会注意到图标只能拖动一次。此外，当我尝试将图标拖到地图上时，图标被拖到地图后面并且看不到。关于我做错了什么有什么建议吗？我觉得这段代码是问题的一部分......
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
让我知道。
注意：下面是使用可拖动图标的地图，但我想在上面的搜索地图上实现相同的方法。因此，我正在尝试将下面地图中的可拖动功能组合到我从Google Map Example获得的上面的搜索地图上
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Demo Map</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas {
width: 70%;
height: 100%;
}
#shelf{position:absolute; top: 0px; left:980px; height:100%;width:30%; float: right; background:white;opacity:0.7;}
#draggable {position:absolute; top:10px; left:10px; width: 30px; height: 30px;z-index:1000000000;}
</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 type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></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);
}
});
});
</script>
<script type="text/javascript">
var $map;
var $latlng;
var overlay;
function initialize() {
var $latlng = new google.maps.LatLng(37.32758, -121.89246);
var myOptions = {
zoom: 19,
center: $latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_LEFT },
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
panControl:false,
};
$map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
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
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id='shelf'>
<img src="https://cdn1.iconfinder.com/data/icons/lightly-icons/30/location.png" id="draggable" title="Estation Trash/Compost" alt="Estation Trash and Compost"/>
</div>
</body>
</html>
我很接近，但对出了什么问题有任何想法吗？