设置图标类型按钮点击谷歌地图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

回答

相关问题