个人中心
gpt4 book ai didi

jquery - 谷歌地图在每个外部链接位置显示多个标记点击而不刷新页面

转载 作者：行者123 更新时间：2023-12-01 08:41:05 25 4
gpt4 key购买 nike

我想显示 Google map 以在每个位置固定多个商店。

例如，位置是

  • 钦奈
  • 特里奇
  • 类加罗尔
  • 海得拉巴

如果我单击链接钦奈， map 将仅显示钦奈的多个商店。如果我点击 Trichy 链接， map 将仅在 Trichy 中显示多个商店，而无需重新加载页面。

如何在谷歌地图中编码？

当前代码是

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="js/map.js"></script>
  </head>
  <body>
    <div id="map-canvas"style="width: 500px; height: 400px;"/>
  </body>
</html>

js代码

// *
// * Add multiple markers
// * 2013 - en.marnoto.com
// *

// necessary variables
var map;
var infoWindow;

// markersData variable stores the information necessary to each marker
var markersData = [
   {
      lat: 40.6386333,
      lng: -8.745,
      name: "Jayasurya Tex",
      address1:"Anna strret",
      address2: "Chennai",
      postalCode: "625789" // don't insert comma in the last item of each marker
   },
   {
      lat: 40.59955,
      lng: -8.7498167,
      name: "Ram Tex",
      address1:"65 Kovalan strret",
      address2: "chennai",
      postalCode: "625001" // don't insert comma in the last item of each marker
   },
   {
      lat: -33.890542,
      lng: 51.274856,
      name: "Keerthi Tex",
      address1:"465 avinashi road",
      address2: "Erode",
      postalCode: "638009" // don't insert comma in the last item of each marker
   },
   {
      lat: -33.890542,
      lng: 51.274856,
      name: "supreme Tex",
      address1:"468 Pks road",
      address2: "Erode",
      postalCode: "638009" // don't insert comma in the last item of each marker
   },
   {
      lat: 40.6247167,
      lng: -8.7129167,
      name: "Niva Tex",
      address1:"75 small bazar street",
      address2: "Trichy",
      postalCode: "698547" // don't insert comma in the last item of each marker
   } // don't insert comma in the last item
];


function initialize() {
   var mapOptions = {
      center: new google.maps.LatLng(40.601203,-8.668173),
      zoom: 9,
      mapTypeId: 'roadmap',
   };

   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

   // a new Info Window is created
   infoWindow = new google.maps.InfoWindow();

   // Event that closes the Info Window with a click on the map
   google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
   });

   // Finally displayMarkers() function is called to begin the markers creation
   displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);


// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers(){

   // this variable sets the map bounds according to markers position
   var bounds = new google.maps.LatLngBounds();

   // for loop traverses markersData array calling createMarker function for each marker 
   for (var i = 0; i < markersData.length; i++){

      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
      var name = markersData[i].name;
      var address1 = markersData[i].address1;
      var address2 = markersData[i].address2;
      var postalCode = markersData[i].postalCode;

      createMarker(latlng, name, address1, address2, postalCode);

      // marker position is added to bounds variable
      bounds.extend(latlng);  
   }

   // Finally the bounds variable is used to set the map bounds
   // with fitBounds() function
   map.fitBounds(bounds);
}

// This function creates each marker and it sets their Info Window content
function createMarker(latlng, name, address1, address2, postalCode){
   var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      title: name
   });

   // This event expects a click on a marker
   // When this event is fired the Info Window content is created
   // and the Info Window is opened.
   google.maps.event.addListener(marker, 'click', function() {

      // Creating the content to be inserted in the infowindow
      var iwContent = '<div id="iw_container">' +
            '<div class="iw_title">' + name + '</div>' +
         '<div class="iw_content">' + address1 + '<br />' +
         address2 + '<br />' +
         postalCode + '</div></div>';

      // including content to the Info Window.
      infoWindow.setContent(iwContent);

      // opening the Info Window in the current map and at the current marker location.
      infoWindow.open(map, marker);
   });
}

CSS

#map-canvas {
    height: 50%;
}
#iw_container .iw_title {
    font-size: 16px;
    font-weight: bold;
}
.iw_content {
    padding: 15px 15px 15px 0;
}

最佳答案

您可以对现有代码进行多项更改:

  • 添加一个数组markers以保留所有标记
  • 为每个标记添加属性，例如 tag 并设置该标记所属位置的值
  • 编写一个根据标签过滤标记的函数
  • 最后，添加调用此函数的链接元素以过滤点击事件上的标记。

概念证明

// necessary variables
var map;
var infoWindow;
var markers = [];

// markersData variable stores the information necessary to each marker
var markersData = [
   {
      lat: 40.6386333,
      lng: -8.745,
      name: "Jayasurya Tex",
      address1:"Anna strret",
      address2: "Chennai",
      postalCode: "625789" // don't insert comma in the last item of each marker
   },
   {
      lat: 40.59955,
      lng: -8.7498167,
      name: "Ram Tex",
      address1:"65 Kovalan strret",
      address2: "Chennai",
      postalCode: "625001" // don't insert comma in the last item of each marker
   },
   {
      lat: 40.6247167,
      lng: -8.7129167,
      name: "Niva Tex",
      address1:"75 small bazar street",
      address2: "Trichy",
      postalCode: "698547" // don't insert comma in the last item of each marker
   } // don't insert comma in the last item
];


function initialize() {
   var mapOptions = {
      center: new google.maps.LatLng(40.601203,-8.668173),
      zoom: 9,
      mapTypeId: 'roadmap',
   };

   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

   // a new Info Window is created
   infoWindow = new google.maps.InfoWindow();

   // Event that closes the Info Window with a click on the map
   google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
   });

   // Finally displayMarkers() function is called to begin the markers creation
   displayMarkers();
}

// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers(){

   // this variable sets the map bounds according to markers position
   var bounds = new google.maps.LatLngBounds();

   // for loop traverses markersData array calling createMarker function for each marker 
   for (var i = 0; i < markersData.length; i++){

      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
      var name = markersData[i].name;
      var address1 = markersData[i].address1;
      var address2 = markersData[i].address2;
      var postalCode = markersData[i].postalCode;

      createMarker(latlng, name, address1, address2, postalCode);

      // marker position is added to bounds variable
      bounds.extend(latlng);  
   }

   // Finally the bounds variable is used to set the map bounds
   // with fitBounds() function
   map.fitBounds(bounds);
}

// This function creates each marker and it sets their Info Window content
function createMarker(latlng, name, address1, address2, postalCode){
   var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      title: name
   });
   
   marker.tag = address2;
   markers.push(marker);

   // This event expects a click on a marker
   // When this event is fired the Info Window content is created
   // and the Info Window is opened.
   google.maps.event.addListener(marker, 'click', function() {

      // Creating the content to be inserted in the infowindow
      var iwContent = '<div id="iw_container">' +
            '<div class="iw_title">' + name + '</div>' +
         '<div class="iw_content">' + address1 + '<br />' +
         address2 + '<br />' +
         postalCode + '</div></div>';

      // including content to the Info Window.
      infoWindow.setContent(iwContent);

      // opening the Info Window in the current map and at the current marker location.
      infoWindow.open(map, marker);
   });
}

function filterMarkersByTag(tagName) {
    var bounds = new google.maps.LatLngBounds();
    
    markers.forEach(function(marker) {
        marker.setMap(null);
    });

    var filtered = markers.filter(function(marker) {
        return marker.tag === tagName;
    }); 
    
    if (filtered && filtered.length) {
        filtered.forEach(function(marker) {
            bounds.extend(marker.getPosition());
            marker.setMap(map);
        });

        map.fitBounds(bounds);
    }
}
#map-canvas {
    height: 50%;
}
#iw_container .iw_title {
    font-size: 16px;
    font-weight: bold;
}
.iw_content {
    padding: 15px 15px 15px 0;
}
<a href="#" title="Chennai" onclick="filterMarkersByTag('Chennai');return false;">Chennai</a>
<a href="#" title="Trichy" onclick="filterMarkersByTag('Trichy');return false;">Trichy</a>
<div id="map-canvas" style="width: 500px; height: 400px;">
</div>
<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initialize"></script>

希望这会有所帮助!

关于jquery - 谷歌地图在每个外部链接位置显示多个标记点击而不刷新页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47279320/

25 4 0
文章推荐： python - 从Python文件中加载文本
文章推荐： asp.net-mvc - 如何让 Url.Action 不保留路由值？
文章推荐： python - 在 Python 正则表达式中使用列表中的值作为变量
文章推荐： ravendb - 如何创建 RavenDB 资源管理器？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com