可拖动图标未显示在 Google 地图顶部且不重复
Draggable Icon Not Showing on top of the Google Map and not Duplicating
如何使用此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地图示例中获得的上面的搜索地图上
<!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>
我很接近,但有什么想法是怎么回事吗?
有 2 个技巧可以避免拖到地图后面。 在可拖动项目上,使用以下选项:
helper: "clone",
appendTo: "body"
通过追加到 body,克隆的帮助程序将成为最新创建的项目,并将位于地图顶部。
相关文章:
- 谷歌地图固定位置覆盖
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 谷歌地图标记不会显示
- 无法在JS中显示谷歌地图
- 科尔多瓦页面类应用程序中的多个谷歌地图
- Android默认浏览器:谷歌地图制作“;位置:相对;元素在页面顶部滚动
- 可拖动图标未显示在 Google 地图顶部且不重复
- 如何使用 OpenLayers 在地图顶部创建可单击的格网图层
- 谷歌地图顶部的高图表
- 谷歌地图商店定位器 点击跳转到页面顶部
- 传单-地图的顶部总是指向传感器的航向
- 我的谷歌地图DIV位于其他所有内容的顶部-我不明白为什么
- OpenLayers 3 -地图顶部的Div不捕获点击
- 全屏谷歌地图顶部的HTML元素
- 正在地图阵列顶部加载播放器
- 谷歌地图API-地图顶部的文本
- 谷歌地图顶部的网格会在正方形中产生间隙
- 如何在传单地图顶部设置形状动画