如何在 Maps Javascript api 中制作谷歌标记？ [关闭]

Posted 2023-03-28

【中文标题】如何在 Maps Javascript api 中制作谷歌标记？ [关闭]

【英文标题】：How can I make a google marker in Maps Javascript api? [closed]

【发布时间】：2020-11-27 15:47:52

【问题描述】：

我正在研究 google maps api。地图通过鼠标单击显示纬度和经度 事件。现在我想做一个谷歌标记。 这是我的 javascript 代码：

<script>
      function initMap() 
        var myLatlng = lat: 23.133899799999995, lng: 14.812842999999999;

        var map = new google.maps.Map(
            document.getElementById('map'), zoom: 16, center: myLatlng);

        // Create the initial InfoWindow.
        var infoWindow = new google.maps.InfoWindow(
            content: 'Click the map to get Lat/Lng!', position: myLatlng);
        infoWindow.open(map);

        // Configure the click listener.
        map.addListener('click', function(mapsMouseEvent) 
        // Close the current InfoWindow.
        infoWindow.close();

        // Create a new InfoWindow.
        infoWindow = new google.maps.InfoWindow(position: mapsMouseEvent.latLng);
        infoWindow.setContent(mapsMouseEvent.latLng.toString());
        infoWindow.open(map);
        
        //Show latitude and longtitude on the site
        var l =mapsMouseEvent.latLng.toString();
        document.getElementById("latlng").innerhtml=l;
        
        );   
      
    </script>

【问题讨论】：

什么是“蓝色谷歌标记”？

蓝色的谷歌标记

【参考方案1】：

查看添加标记的示例： https://developers.google.com/maps/documentation/javascript/examples/marker-simple

var marker;
// Configure the click listener.
map.addListener('click', function(mapsMouseEvent) 
  // Close the current InfoWindow.
  infoWindow.close();

  if (marker && marker.setPosition)
    // if the marker already exists, move it
    marker.setPosition(mapsMouseEvent.latLng);
  else
    // create a blue marker
    marker = new google.maps.Marker(
      position: mapsMouseEvent.latLng,
      map: map,
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
    );
 );

function initMap() 
  var myLatlng = 
    lat: 23.133899799999995,
    lng: 14.812842999999999
  ;

  var map = new google.maps.Map(
    document.getElementById('map'), 
      zoom: 16,
      center: myLatlng
    );
  var marker;
  // Create the initial InfoWindow.
  var infoWindow = new google.maps.InfoWindow(
    content: 'Click the map to get Lat/Lng!',
    position: myLatlng
  );
  infoWindow.open(map);

  // Configure the click listener.
  map.addListener('click', function(mapsMouseEvent) 
    // Close the current InfoWindow.
    infoWindow.close();

    if (marker && marker.setPosition)
      marker.setPosition(mapsMouseEvent.latLng);
    else
      marker = new google.maps.Marker(
        position: mapsMouseEvent.latLng,
        map: map,
        icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
      );

    //Show latitude and longtitude on the site
    var l = mapsMouseEvent.latLng.toString();
    document.getElementById("latlng").innerHTML = l;

  );

html,
body 
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;


#map 
  height: 90%;
  width: 100%;

<div id="latlng"></div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>