Question

（我非常喜欢这个。我自己学习，我知道我的代码很乱。）

我正在使用Google Maps API，我希望用户点击按钮（餐厅1或餐厅2），然后使用上面的标记和InfoWindow将地图平移到该餐馆的位置。简单，对吧？

到目前为止，这是我的HTML代码。

＆＃13;

<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="estilo.css">
<link rel="stylesheet" href="fuente1.css">
<link rel="stylesheet" href="fuente2.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
</style>
<body class="w3-light-grey">

<!-- Page Container -->
<div class="w3-content w3-margin-top" style="max-width:1400px;">

  <!-- The Grid -->
  <div class="w3-row-padding">
  
    <!-- Left Column -->
<div class="w3-third">
    
      <div class="w3-white w3-text-grey w3-card-4">
        <div class="w3-container">
          <img><br>Choose a restaurant<p><br>
<button id="button" style="width:110px;height:30px;cursor:pointer;">Restaurant 1</button>
<button id="button2" style="width:110px;height:30px;cursor:pointer;">Restaurant 2</button>

            <!-- End Left Column -->    </p>
        </div>
      </div>
</div>

    <!-- Right Column -->
    <div class="w3-twothird">
    
      <div class="w3-container w3-card w3-white w3-margin-bottom">
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-blue"></i>
MAP
</h2><div class="w3-container">
<html>
<body>
<div id="map" style="width:555px;height:500px"></div>
<script>
  function myMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(31.825948, -116.599869),
      zoom: 16
    });
  }

  function addmarker(lat, lon) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lon),
      map: map
    });
    
    map.panTo(new google.maps.LatLng(lat, lon));
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQ3QnkneaUIsXaJHZtYwqdWxX9KCMj4CA&callback=myMap">"></script>
</body>
</html>
       <br><br>

        </div>
      </div>
<!-- End Right Column -->
    </div>
    
  <!-- End Grid -->
  </div>
  
  <!-- End Page Container -->
</div>
</body>
</html>
</body>
</html>

＆＃13;

正如你所看到的，我已经完成了所有设置。唯一不起作用的是按钮。

我有以下Javascript，但我不知道如何在我的HTML中实现它。

    $('#button').click(function() {
  addmarker('-22.3157017', '-49.0660877');
});
$('#button2').click(function() {
  addmarker('-23.5936152', '-46.5856465');
});

我很高兴听到有关此事的任何讲座，我们将非常感谢您的帮助。

作为参考，我希望它的工作方式与此类似。 Place marker on google maps api with html button

Answer 1

我没有使用你的标记 - 我创建了自己的标记。

在检查您的javascript后，一切似乎都很顺利，除了以下两件事：缺少jQuery库和按钮事件处理程序的代码放置。< / p>

您似乎试图通过按下相应的触发器（按钮）将 Google Maps Javascript API Markers 添加到这些位置“-22.3157017，-49.0660877”和“-23.5936152，-46.5856465”。一旦事件被触发，我建议在添加标记之前执行 Reverse Geocoding 。

术语地理编码通常是指翻译人类可读的地址到地图上的位置。做反过来的过程，将地图上的位置翻译成人类可读的地址，是称为反向地理编码。

您还应该将 jQuery 添加为外部库，以使其“.click（）”等事件生效。您可以下载 here 。

对于按钮，你应该添加这些行$（'＃button1'）。click（function（））;和$（'＃button1'）。click（function（））;在myMap（）函数中。

看起来应该是这样的：

  function myMap() {
    var myLatLng = {lat: 31.825948, lng: -116.599869};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });
    $('#button1').click(function(){
      var coord = { lat: parseFloat('-22.3157017'), lng: parseFloat('-49.0660877') };
      addMarker( coord, map );
    });
     $('#button2').click(function(){
      var coord = { lat: parseFloat('-23.5936152'), lng: parseFloat('-46.5856465') };
      addMarker( coord, map );
    });        
  }

在addMarker函数中，添加两个接受坐标的参数和地图对象。

function addMarker(params, map) {);

在该功能中，创建一个变量地理编码器，该值是google.maps.Geocoder（）的新实例。

var geocoder = new google.maps.Geocoder();

有了这个，您现在可以使用地理编码方法。 Geocode方法接受两个参数：location和callback。在位置参数中，您需要提供从addMarker（）函数获取的坐标。

geocoder.geocode({'location' : params}, function( results, status ) {});

回调是我们的大多数逻辑将被实现的部分。回调接受两个参数：结果和状态。如果状态为确定，则结果参数会返回一系列结果。如果是这样，我们现在将遍历每个数组元素，然后创建一个新的 Google Maps Javascript API标记。在标记上，我们只提供坐标和地图对象的位置和地图属性。

if (status === 'OK') {         
  var result = results.map( function( value, index ){
   map.setCenter(params);                                               
   var newMarker = new google.maps.Marker({
       position : params,
       map : map,
    });                 
  });   
 } else {
   alert('Geo not successful: ' + status);
 }

这一行'map.setCenter（params）;'设置地图显示的位置。

以下整个代码：

<button id="button1">Restaurant 1</button>
<button id="button2">Restaurant 2</button>
<div id="map"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=myMap">
    </script>

  function myMap() {
    var myLatLng = {lat: 31.825948, lng: -116.599869};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });
    $('#button1').click(function(){
      var coord = { lat: parseFloat('-22.3157017'), lng: parseFloat('-49.0660877') };
      addMarker( coord, map );
    });
     $('#button2').click(function(){
      var coord = { lat: parseFloat('-23.5936152'), lng: parseFloat('-46.5856465') };
      addMarker( coord, map );
    });       
  }
  function addMarker(params, map) {

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'location' : params}, function( results, status ) {
        if (status === 'OK') {         
            var result = results.map( function( value, index ){
            map.setCenter(params);                                               
            var newMarker = new google.maps.Marker({
              position : params,
              map : map,
              animation: google.maps.Animation.DROP,
            });                 
            });   
          } else {
            alert('Geo not successful: ' + status);
          }

      });

 }

希望它可以帮助和快乐编码！

Answer 2

之前我已经在stackoverflow上回答了这个问题，了解如何显示图标和infowindow，并且只是更新了我的fiddle以使用https。以下是您需要处理的非常简单的步骤。

当你点击那个小提琴时，你会看到我用来在地图上显示图标的所有HTML，JS和CSS，车上人员列表和互动点击它们以在地图上居中。
使用gmap3库我已经在页面
使用List元素我在<li data-gb="car" data-mapid="sc102" data-isactive="0" data-lat="53.538566" data-long="-0.327017199999951">Second Car</li>的每个项目的数据属性中编码了项目的位置。它可以是restuarants，公园等。

代码中的重要位是Javascript，这些是事件和添加标记操作以及单击列表项的逻辑。

{ action: 'addMarkers',
marker:{
values:ulmarkerspeople,
options:{
    draggable: false,
    icon:'http://webricate.com/stackoverflow/mapicons/male-2.png'
},
events:{
  mouseover: function(marker, event, context){
    var listelement = jQuery("li[data-mapid='"+context.data.id+"']");
    jQuery(listelement).attr('style','background-color:#ccc');
    jQuery(listelement).attr('data-isactive','1');
    var map = $(this).gmap3("get"),
      infowindow = $(this).gmap3({get:{name:"infowindow"}});
    if (infowindow){
      infowindow.open(map, marker);
      infowindow.setContent(context.data.ht);
      jQuery("#customPopup").html(context.data.ht);
        jQuery("#customPopup").show(500);
    } else {
      $(this).gmap3({
        infowindow:{
          anchor:marker, 
          options:{content: context.data.ht}

        }
      });
        jQuery("#customPopup").html(context.data.ht);
        jQuery("#customPopup").show(500);
    }
  },
  mouseout: function(marker,event,context){
    var listelement = jQuery("li[data-mapid='"+context.data.id+"']");
    jQuery(listelement).attr('style','background-color:#fff');
    jQuery(listelement).attr('data-isactive','0');
    var infowindow = $(this).gmap3({get:{name:"infowindow"}});
    if (infowindow){
      infowindow.close();

      jQuery("#customPopup").hide(500);
      jQuery("#customPopup").html("");
    }
   }
  }
 } 
}

请阅读关于小提琴的Javascript评论，您将获得它的要点。

Google地图：按钮无法显示标记

2 个答案: