設置圖標類型按鈕點擊谷歌地圖API3

我想做一個簡單的交互式地圖，將允許用戶從地圖外的按鈕中選擇標記類型，然後在用戶點擊時放置一個標記地圖。標記被刪除後，用戶可以重新定位地圖或選擇其他標記類型添加。我意識到這是一個非常基本的問題，但我剛開始學習。當我仍然在學習術語時，我將非常感謝一個例子。謝謝！設置圖標類型按鈕點擊谷歌地圖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>

來源

2017-05-05 NewGuy

這裏簡單：

<!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=AIzaSyDTQxCH5Vw9ot8amZ-3dG66_joi2mzpJqI&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); 
    }); 
} 

var markerIcon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png'; 
function setMarkerIconColor(color){ 
    if (color == "blue") {markerIcon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png'}; 
    if (color == "red") {markerIcon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png'}; 
} 
function placeMarker(location) { 
    var marker = new google.maps.Marker({ 
     position: location, 
     icon: markerIcon, 
     map: map, 
     draggable: true, 
    }); 
} 

</script> 

    <div id="map_canvas" style="width:50%; height:50%;"></div> 
    <button id= "blueButton" onclick="setMarkerIconColor('blue')"> Add blue Marker </button> 
    <button id= "redButton" onclick="setMarkerIconColor('red')"> Add Red Marker</button> 
</body> 
</html>

來源

2017-05-05 10:51:18 ReFran

設置圖標類型按鈕點擊谷歌地圖API3

回答

相關問題