自从我访问 StackOverflow 这个非常有帮助的世界以来已经有一段时间了，但我又带着另一个问题回来了，以帮助我尝试做比我目前能力更多的事情。
我想在我的一个网站上放置一个谷歌地图，并且我希望它在 map 的一侧有一个自定义标记列表，该网站的访问者可以将其拖动到 map 上进行识别各种功能 - 假设该列表具有商店、房屋和办公室的自定义标记。访问者将适当的标记拖动到 map 上要素所在的位置。他们可能想要拖动同一自定义标记的多个副本(例如许多商店)，因此在用户将其拖动到 map 后，该标记必须重新出现在列表中。当用户放下标记时，他们应该看到一个信息框，要求用户提供更多信息，然后提示他们保存该标记，以便其他人访问时也可以看到该功能(但不能更改它)。我真的很想做到这一点，以便当用户保存标记时，它会将所有信息添加到 mysql 数据库中，并通过电子邮件将信息框中的详细信息(包括标记的经纬度)发送给我。
这就是最终目标，我知道这是一项艰巨的任务，但如果有人能为我指出作为十个首发的方向，我将非常感激。
非常感谢，
罗布。
最佳答案
我创建了一个带有自定义可拖动标记的示例。
更具体地说，它包含以下标记类型:
- parking
- 信息
- 图书馆
pointsOfInterest 数组包含按下“添加一些标记”链接时显示的标记。
<!doctype html>
<html lang="en">
<head>
<title>Google Maps</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en">
</script>
<script type="text/javascript">
// points of interest
var pointsOfInterest = [
['Chicago Parking', 41.850033, -87.6500523, 'parking'],
['Illinois Library', 40.797177, -89.406738, 'library'],
['Detroit Info', 42.302284,-83.231215, 'info']
],
// map initial center position
demoCenter = new google.maps.LatLng(42, -87),
map;
// initialize the map
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
// some standard icons for google markers
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png',
shadow: iconBase + 'parking_lot_maps.shadow.png'
},
library: {
icon: iconBase + 'library_maps.png',
shadow: iconBase + 'library_maps.shadow.png'
},
info: {
icon: iconBase + 'info-i_maps.png',
shadow: iconBase + 'info-i_maps.shadow.png'
}
};
// create draggable marker and add in map
function createMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
shadow: {
url: icons[feature.type].shadow,
anchor: new google.maps.Point(16, 34)
},
draggable: true,
map: map
});
return marker;
}
// add the markers included inside the pointsOfInterest array
function addMarkers() {
var marker,
i,
infowindow = new google.maps.InfoWindow();
for (i = 0; i < pointsOfInterest.length; i++) {
var feature = new Object();
// set type
feature.type = pointsOfInterest[i][3];
// set position
feature.position = new google.maps.LatLng(pointsOfInterest[i][1], pointsOfInterest[i][2]);
// create the marker
var marker = createMarker(feature);
// add a listener to do something on marker click
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(pointsOfInterest[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
$(document).ready(function () {
initialize();
});
$(document).on('click', '.add-markers', function (e) {
e.preventDefault();
addMarkers();
});
</script>
</head>
<body>
<div id="basic-map">
<div id="map_canvas" style="height:350px;"></div>
<a href="#" class="add-markers">Add Some Markers</a>
</div>
</body>
</html>
我希望这会有所帮助。
关于php - 如何为谷歌地图创建可拖动的自定义标记列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15212542/