自从我访问了StackOverflow非常有用的世界以来已经有一段时间了，但是我又回来了另一个问题，以帮助我尝试做更多的事，而不是我现在能做的。
我想在自己的一个网站上放置一个google地图，并希望在地图的一侧有一个自定义标记列表，网站的访问者可以将其拖到地图上以标识各种功能-可以说，该列表具有用于商店，房屋和办公室的自定义标记。访客将适当的标记拖动到地图上该要素所在的位置。他们可能希望拖动同一自定义标记的多个副本（例如，许多商店），因此在用户将标记拖动到地图上之后，标记必须重新出现在列表中。当用户放下标记时，应该向他们显示一个信息框，询问用户更多信息，然后提示他们保存该标记，以便当其他人访问时也可以看到该功能（但不能更改）。我真的很想这样做，以便当用户保存标记时，它将所有信息添加到mysql数据库中，并且还通过电子邮件向我发送来自信息框的详细信息，包括标记的纬度。
所以这是最终目标，我知道这是一项艰巨的任务，但是如果有人能指出我作为十个人的发车人的方向，我将非常感激。
非常感谢，
抢。
最佳答案
我创建了带有自定义可拖动标记的示例示例。
更具体地说，它包含以下标记类型：
停车处
信息
图书馆
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 - 如何为Google map 创建可拖动的自定义标记列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15212542/