0
我想做一个简单的交互式地图,将允许用户从地图外的按钮中选择标记类型,然后在用户点击时放置一个标记地图。标记被删除后,用户可以重新定位地图或选择其他标记类型添加。我意识到这是一个非常基本的问题,但我刚开始学习。当我仍然在学习术语时,我将非常感谢一个例子。谢谢!设置图标类型按钮点击谷歌地图API3
这是我到目前为止。
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>Simple SITTEMP</title>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=drawing" async defer>
</script>
</head>
<body onload="initialize()" style="height:100%">
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(45.401942, -110.663985);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
};
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true,
});
}
</script>
<div id="map_canvas" style="width:50%; height:50%;"></div>
<button id= "blueButton"> Add Blue Marker</button>
<button id= "redButton"> Add Red Marker</button>
</body>
</html>