Question

我正在使用此代码在我的网站上显示地图

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
  var geocoder;
  var map;
  var address ="";

  function map(){
   alert("insisde");
  if(!document.getElementById('val').value){
  alert('Enter Val 1 Value');
  }
  else if (!document.getElementById('val2').value){
  alert('Enter Val 2 Value');
  }
  else if (!document.getElementById('val3').value){
  alert('Enter Val 3 Value');
  }
  else{
    address += document.getElementById('val').value;
    address += document.getElementById('val2').value;
    address += document.getElementById('val3').value;
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);
            map.setZoom(13);
            var infowindow = new google.maps.InfoWindow(
                { content: '<b>'+address+'</b>',
                  size: new google.maps.Size(150,50)
                });

            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map, 

                title:address
            }); 
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });

          } else {
            alert("No results found");
          }
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }
  }

</script>
</head>
<body style="margin:0px; padding:0px;" >

 <input id="val" />
 <input id="val2" />
 <input id="val3" />
 <button onClick="map()" >Add Map</button>
 <div id="map_canvas"  style="width:50%; height:50%;">
</body>
</html>

当用户点击它并第一次添加地址时工作正常但是当用户更改其地址并单击添加地图按钮或者只是在第二次按下添加地图按钮时它会在日志中显示错误

asd.html:78 Uncaught TypeError: map is not a function

Answer 1

每次调用地理编码器时都不需要初始化地图。只需在文档加载时初始化它，然后只显示带有地理编码器结果的标记。每次调用地理编码时，您只需从地图中删除旧标记即可。试试这个：

<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
  var map = null;
  var marker = null;

  $(document).ready(function(){
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
        zoom: 1,
        center: latlng,
      mapTypeControl: true,
      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
      navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  });

  function geocode(){
      if(marker) marker.setMap(null);
      var geocoder;
      var address ="";
  if(!document.getElementById('val').value){
  alert('Enter Val 1 Value');
  }
  else if (!document.getElementById('val2').value){
  alert('Enter Val 2 Value');
  }
  else if (!document.getElementById('val3').value){
  alert('Enter Val 3 Value');
  }
  else{
    address += document.getElementById('val').value + " ";
    address += document.getElementById('val2').value + " ";
    address += document.getElementById('val3').value;
    geocoder = new google.maps.Geocoder();

    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);
            map.setZoom(13);
            var infowindow = new google.maps.InfoWindow(
                { content: '<b>'+address+'</b>',
                  size: new google.maps.Size(150,50)
                });

            marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map, 

                title:address
            }); 
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });

          } else {
            alert("No results found");
          }
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }
  }

</script>
</head>
<body style="margin:0px; padding:0px;" >

 <input id="val" />
 <input id="val2" />
 <input id="val3" />
 <button onClick="geocode()" >Geocode</button>
 <div id="map_canvas"  style="width:50%; height:50%;">
</body>
</html>

java脚本中的谷歌地图无法在第二次点击时工作

1 个答案: