将纬度和经度作为url中的参数传递

时间:2016-01-23 11:05:20

标签: javascript google-maps

我正在尝试创建一个html文件来显示谷歌地图。这是我用来完成它的代码。

    <!DOCTYPE html>
    <html>
    <head>
    <title> Map</title>
    </head>
    <body>
    <div id="map-container" class="col-md-6"></div>


    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script>    



  function init_map() {

    var var_location = new google.maps.LatLng(12.989802,80.2487);

    var var_mapoptions = {
      center: var_location,
      zoom: 14
    };

    var var_marker = new google.maps.Marker({
        position: var_location,
        map: var_map,
        title:"Venice"});

    var var_map = new google.maps.Map(document.getElementById("map-container"),
        var_mapoptions);

    var_marker.setMap(var_map); 

  }

  google.maps.event.addDomListener(window, 'load', init_map);

   </script>
  </body>

在此代码中,在js内手动给出值和纬度和经度。但我希望将纬度和经度作为url参数传递。

EX:http://www.smart.com/3.html?q=12.989802,80.2487

这是因为我的网址会从应用中调用,他们希望将纬度和经度作为参数传递。

2 个答案:

答案 0 :(得分:1)

我编辑了你的功能。试试这个。

item.isExpanded

这是你想要的行为吗?只是忍受在脑海里。如果url函数中没有必需参数则无能为力。确保放置任何默认值或执行其他任何操作。祝好运实施。

答案 1 :(得分:1)

您可以编写代码来读取和解析查询字符串。关于如何做到这一点的一个描述是Mike Williams的Part 20 Passing and receiving parameters&#39;} Google Maps Javascript API v2教程(请注意,v2已弃用并已关闭,但相同的原则适用于v3)。

example using "q=40.7127837,-74.0059413" (the code snippet doesn't take query parameters)

&#13;
&#13;
function init_map() {
  var lat, lng;
  // If there are any parameters at eh end of the URL, they will be in  location.search
  // looking something like  "?q=42,-72"

  // skip the first character, we are not interested in the "?"
  var query = location.search.substring(1);

  // split the rest at each "&" character to give a list of  "argname=value"  pairs
  var pairs = query.split("&");
  for (var i = 0; i < pairs.length; i++) {
    // break each pair at the first "=" to obtain the argname and value
    var pos = pairs[i].indexOf("=");
    var argname = pairs[i].substring(0, pos).toLowerCase();
    var value = pairs[i].substring(pos + 1).toLowerCase();

    // process each possible argname  -  use unescape() if theres any chance of spaces
    if (argname == "q") {
      var coords = value.split(",");
      lat = parseFloat(coords[0]);
      lng = parseFloat(coords[1]);
    }
  }
  var var_location;
  if (isNaN(lat) || isNaN(lng)) {
    var_location = new google.maps.LatLng(12.989802, 80.2487);
  } else {
    var_location = new google.maps.LatLng(lat, lng);
  }
  var var_mapoptions = {
    center: var_location,
    zoom: 14
  };

  var var_marker = new google.maps.Marker({
    position: var_location,
    map: var_map,
    title: "Venice"
  });

  var var_map = new google.maps.Map(document.getElementById("map-container"),
    var_mapoptions);

  var_marker.setMap(var_map);

}

google.maps.event.addDomListener(window, 'load', init_map);
&#13;
html,
body,
#map-container {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-container" class="col-md-6"></div>
&#13;
&#13;
&#13;