当我单击标记而不是删除它时，我应该做些什么来创建自定义菜单

what should i do to create custom menu appear when i click the marker instead of deleting it

本文关键字：我应该 做些什么 菜单 自定义 创建 删除 单击      更新时间：2023-09-26

这是我到目前为止所做的代码，当我添加标记并将其悬停时，会出现信息窗口，但所有的信息窗口都是相同的，我需要为每个标记更改它，第二，我想在标记的顶部创建一个自定义菜单框，在那里应该有添加信息和删除标记的选项。

<html>
<head>
<title>example</title>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<style type="text/css">
#map_canvas {
        width: 100%;
        height: 500px;
        background-color: #CCC;}
#menu_bar{
        width: 100%;
        height: 150px;
        position:absolute;
        bottom:0px;
        background-color:#008080;
        border-top:1px solid red;}
body{
        padding:0px;
        margin:0px;}


</style>
<!-- google maps Scripting start -->
<script type="text/javascript">
var markers = [];
 function initialize() {
  var myLatlng = new google.maps.LatLng(44.5403, -78.5463);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    google.maps.event.addListener(map, 'click', function(event) {
        addMarker(event.latLng);
      });

    // add marker to positon
    function addMarker(location) {
         var marker = new google.maps.Marker({
                position: location,
                map: map
            });
            // deleting
    google.maps.event.addListener(marker, 'click', function(event) {
        this.setMap(null);
        });
            // adding info window to gMaps

                    var infowindow = new google.maps.InfoWindow({
                         content: "holdings content area"
                    });
                     google.maps.event.addListener(marker, 'mouseover', function() {
                         infowindow.open(map, this);
                    });
                    // assuming you also want to hide the infowindow when user mouses-out
                    google.maps.event.addListener(marker, 'mouseout', function() {
                        infowindow.close();
                    });

         markers.push(marker);
        }
    // Sets the map on all markers in the array.
        function setAllMap(map) {
          for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
          }
        }
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- google maps Scripting ends -->


</head>
<body>
<div id="map_canvas"></div>
<div id="menu_bar">


</div>

</body>
</html>

首先在html中创建一个菜单或弹出窗口或任何您想要的东西，将此html复制到javascript变量中，然后创建gMap infoWindow并将内容设置为您的自定义设计，在最后一步中，将事件绑定到您的标记，并在该事件中打开您的信息窗口。

  var map = new google.maps.Map(document.getElementById('yourmap'), mapOptions);
  var popup= '<div>Design your whatever styled popup you want</div>';
  var infowindow = new google.maps.InfoWindow({
      content: popup
  });
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'ABC'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
相关文章：