当我单击链接（地点名称）时，它应该在同一页面上的地图中显示位置答案

【问题标题】：When I click a link(name of a place) it should display the location in map on the same page当我单击链接（地点名称）时，它应该在同一页面上的地图中显示位置
【发布时间】：2017-01-29 19:38:13
【问题描述】：

当我点击链接时，我想在同一页面上的地图上显示位置。我已经通过网页上的 API 密钥集成了地图。这是我的代码：

<html>
    <body>
        <div id="googleMap" style="width:100%;height:400px;"></div>
        <?php
            $add = "Amity University, Lucknow";
            $link = "http://maps.google.com/?q=".$add;
        ?>
        <a href="<?php echo $link; ?>">Amity University, Lucknow</a>
        <script>
            function myMap() {
            var mapProp= {
                center:new google.maps.LatLng(51.508742,-0.120850),
                zoom:5,
            };
            var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
            }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4jChq2-_I4Dc0KSh3VI_OCaCDcG68oq8&callback=myMap"></script>
    </body>
</html>

我不想将结果显示在另一个页面上，而是希望将同一张地图移动到所需位置。

【问题讨论】：

标签： javascript html google-maps dictionary

【解决方案1】：

你需要从api获取坐标并重新加载myMap函数()

对于 Amity University-Lucknow，坐标为“26.8509922,81.0476597”

function myMap(x,y) {
        var mapProp= {
            center:new google.maps.LatLng(x,y),
            zoom:5,
        };
        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

并且您应该从“”中删除href，因为它正在更改URL，这反过来又会更改页面。

更新：

<html>
<body>
    <div id="googleMap" style="width:100%;height:400px;"></div>
    <a onClick="myMap(26.8509922,81.0476597)">Amity University, Lucknow</a>
    <script>
        function myMap(x,y) {
            if(x==undefined || y==undefined){
                x = 51.508742;
                y= -0.120850;
            }
        var mapProp= {
            center:new google.maps.LatLng(x,y),
            zoom:15,
        };
        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4jChq2-_I4Dc0KSh3VI_OCaCDcG68oq8&callback=myMap"></script>
</body>

您必须从 gmap 中获取链接的坐标并将其粘贴到 onClick(myMap({x,}{y}))

【讨论】：

看我会有不同位置的多个链接。我希望地图在单击时搜索链接并在同一 div 中显示结果
@zainulabdeen 检查更新 .. 它在没有 PHP 的情况下工作

【解决方案2】：

最简单的解决方案是使用Geocoder（除非您有“地点”的坐标）。

function geocodeAddress(address) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({address: address}, function(results, status) {
      if (status == "OK") {
         if (results[0].geometry.viewport) map.fitBounds(results[0].geometry.viewport);
         else if (results[0].geometry.bounds) map.fitBounds(results[0].geometry.bounds);
         else map.setCenter(results[0].geometry.location);
      } else alert("geocoder failed, status: "+status);
    });
}

然后在你的 HTML 中像这样使用它：

<a href="javascript:geocodeAddress('Amity University, Lucknow');">Amity University, Lucknow</a> - 
<a href="javascript:geocodeAddress('London, UK');">London</a> - 
<a href="javascript:geocodeAddress('Oxford University');">Oxford</a>

proof of concept fiddle

代码 sn-p：

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<div id="googleMap" style="width:100%;height:400px;"></div>
<a href="javascript:geocodeAddress('Amity University, Lucknow');">Amity University, Lucknow</a> -
<a href="javascript:geocodeAddress('London, UK');">London</a> - <a href="javascript:geocodeAddress('Oxford University');">Oxford</a>
<script>
  // global map variable
  var map;

  function myMap() {
    var mapProp = {
      center: new google.maps.LatLng(51.508742, -0.120850),
      zoom: 5,
    };
    // initialize global map variable
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  }

  function geocodeAddress(address) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      address: address
    }, function(results, status) {
      if (status == "OK") {
        if (results[0].geometry.viewport) map.fitBounds(results[0].geometry.viewport);
        else if (results[0].geometry.bounds) map.fitBounds(results[0].geometry.bounds);
        else map.setCenter(results[0].geometry.location);
      } else alert("geocoder failed, status: "+status);
    })
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

【讨论】：