嗯，這是一段時間以來，我訪問了非常有用的世界的StackOverflow，但我又回到另一個問題，以幫助我嘗試做比我更多目前能勝任。如何創建一個可拖動的自定義標記列表谷歌地圖
我想將谷歌地圖放在我的某個網站上，我希望它在地圖的一側有一個自定義標記的列表，以便該網站的訪問者可以拖動到地圖上識別各種功能 - 例如，可以說該列表具有用於商店，住宅和辦公室的定製標記。訪問者將相應的標記拖放到地圖上特徵所在的位置。他們可能想要拖動相同自定義標記（例如多個商店）的多個副本，因此標記必須在用戶將其拖動到地圖後重新出現在列表中。當用戶放下標記時，他們應該會看到一個信息框，詢問用戶更多信息，然後提示他們保存該標記，以便其他人訪問時也可以看到該功能（但不能更改）。我真的想要這樣做，以便當用戶保存標記時，它將所有信息添加到mysql數據庫，並通過電子郵件向我發送詳細信息，包括標記的lat-long。
這就是最終目標，我知道這是一項大任務，但如果任何人都能指點我作爲十人首發的方向，我會非常感激。
非常感謝，
Rob。
我創建了一個自定義可拖動標記的示例示例。
更具體地說，它包含以下標記類型：
的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>
我希望這有助於。
非常感謝你的示例，這真的很有用。順便說一下，我還發現了一個網站，它完全符合我試圖達到的目標（不同目的但相同概念） - https://www.streetviolence.org現在我需要做的就是讓他們向我展示他們是如何做到的:-D – 2013-03-05 14:25:27
看[that]（https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-CN#MarkerAnimations）示例，如果您有特定的代碼問題，請返回併發布一些代碼 – bitWorking 2013-03-04 22:45:31
請參閱[google地圖API v3組中的此線索]（https://groups.google.com/group/google-maps-js-api-v3/browse_frm/thread/adec0050cd340390/fef0e8df166f08db?lnk=gst&q=drag+marker +到+ map＃fef0e8df166f08db），它有一個鏈接到[這個例子（這看起來就像你要求的）]（http://www.wolfpil.de/v3/drag-from-outside.html） – geocodezip 2013-03-05 00:00:31
非常感謝你提出這些建議 - 你是對的，這正是我所尋找的開始。順便說一句，我還發現另一個網站，確實做了什麼，我試圖實現 - https://www.streetviolence.org現在我所需要做的就是讓他們告訴我他們是如何做到的:-D – 2013-03-05 14:23:55