个人中心
gpt4 book ai didi

javascript - 如何去掉这段代码中的 map ？

转载 作者：行者123 更新时间：2023-12-03 07:06:46 24 4
gpt4 key购买 nike

我有这段 javascript，它有一个搜索表单，允许用户输入邮政编码，它返回该邮政编码的纬度和经度值，并在 map 上精确定位它。如何摆脱 map 并让页面仅显示纬度和经度值？我尝试删除我认为与 map 有关的所有内容，但它完全失败了，所以我希望有人可以帮助我!

代码:

<style type="text/css">
  #map
  {
    height:400px;
    width:400px;
    display:block;
  }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY-API"></script>
<script type="text/javascript">

  function getPosition(callback) {
    //set up our geoCoder
    var geocoder = new google.maps.Geocoder();

    //get our postcode value
    var postcode = document.getElementById("postcode-bar").value;

    //send value to google to get a longitude and latitude value
    geocoder.geocode({'address': postcode}, function(results, status) {

      //callback with a status and result
      if (status == google.maps.GeocoderStatus.OK) {
        //send the values back in a JSON string
        callback({
          latt: results[0].geometry.location.lat(),
          long: results[0].geometry.location.lng()
        });
      }
    });
  }
function setup_map(latitude, longitude) {

    //create a JSON object with the values to mark the position
    var _position = { lat: latitude, lng: longitude};

    //add our default mapOptions
    var mapOptions = {
      zoom: 16              //zoom level of the map
      center: _position     //position to center
  }

    //load a map within the "map" div and display
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    //add a marker to the map with the position of the longitude and latitude
    var marker = new google.maps.Marker({
      position: mapOptions.center,
      map: map
    });
}
window.onload = function() {

    //first setup the map, with our default location of London
    setup_map(51.5073509, -0.12775829999998223);

    document.getElementById("form").onsubmit = function() {

      //when form is submitted, wait for a callback with the longitude and latitude values
      getPosition(function(position){

        //log the position returned
        var text = document.getElementById("text")
        text.innerHTML = "Marker position: { Longitude: "+position.long+ ",  Latitude:"+position.latt+" }";

        //update the map with the new position
        setup_map(position.latt, position.long);
      });
    }
}

</script>

</head>
<body>


<div id="postcode-search" class="input-group">

  <form action="javascript:void(0)" id="form">

    <input id="postcode-bar" class="form-control" placeholder="Enter your postcode" type="text"></input>
    <span class="input-group-btn">
      <button class="btn btn-default" id="postcode-btn" type="button">Go</button>
    </span>

  </form>

</div>

<div id="map"></div>
<div id="text"></div>

最佳答案

不执行setup_map()函数。

window.onload = function() {

//first setup the map, with our default location of London
setup_map(51.5073509, -0.12775829999998223);

document.getElementById("form").onsubmit = function() {

  //when form is submitted, wait for a callback with the longitude and latitude values
  getPosition(function(position){

    //log the position returned
    var text = document.getElementById("text")
    text.innerHTML = "Marker position: { Longitude: "+position.long+ ",  Latitude:"+position.latt+" }";

    //update the map with the new position
    setup_map(position.latt, position.long);
  });
}
}

至

window.onload = function() {
  //first setup the map, with our default location of London
  // setup_map(51.5073509, -0.12775829999998223);

    document.getElementById("form").onsubmit = function() {

      //when form is submitted, wait for a callback with the longitude and latitude values
      getPosition(function(position){

        //log the position returned
        var text = document.getElementById("text")
    text.innerHTML = "Marker position: { Longitude: "+position.long+ ",  Latitude:"+position.latt+" }";


    //update the map with the new position
    //setup_map(position.latt, position.long);
  });
}
}

您可以删除该功能，但您永远不知道什么时候可能需要它..

关于javascript - 如何去掉这段代码中的 map ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36795441/

24 4 0
文章推荐： javascript - 按类查找元素
文章推荐： javascript - 使用ajax调用更新数据库onclick
文章推荐： javascript - 使用 ava 测试访问全局命名空间
文章推荐： javascript - ImageJ 宏路径问题
行者123
个人简介

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

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