Javascript 使用相同的分区和变量动态创建google地图_Javascript_Jquery_Html_Css_Google Maps

Javascript 使用相同的分区和变量动态创建google地图

javascript jquery html css google-maps

Javascript 使用相同的分区和变量动态创建google地图,javascript,jquery,html,css,google-maps,Javascript,Jquery,Html,Css,Google Maps,我正在尝试使用以下脚本在同一分区和同一变量“map”上单击生成地图，它不起作用，我不知道如何销毁旧地图并重新创建，请有人帮助我。。这就是我到目前为止所尝试的这里是链接到 JS HTML 我没有做测试，只是检查语法我测试一下，你的小提琴的问题 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UT

我正在尝试使用以下脚本在同一分区和同一变量“map”上单击生成地图，它不起作用，我不知道如何销毁旧地图并重新创建，请有人帮助我。。这就是我到目前为止所尝试的

这里是链接到

HTML

我没有做测试，只是检查语法

我测试一下，你的小提琴的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>- jsFiddle demo</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
    <style type='text/css'>
        #map { height: 300px; width: 500px; }
        button { width: 70px; height: 40px;}
    </style>
    <script type='text/javascript'>
        function map(lat, lon) {
            var centerPosition = new google.maps.LatLng(lat, lon);
            var options = {
                zoom: 16,
                center: centerPosition,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), options);
        }
    </script>
</head>
<body>
    <div id="map"></div>
    <button onclick="map(15,90)">15 90</button>
    <button onclick="map(22,80)">22 80</button>
</body>
</html>


-JSFIDLE演示
#地图{高度：300px；宽度：500px；}
按钮{宽度：70px；高度：40px；}
功能图（纬度、经度）{
var centerPosition=new google.maps.LatLng（lat，lon）；
变量选项={
缩放：16，
中心：中心位置，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map”），选项）；
}
15 90
22 80

您可以在结果框“$（window）.load（function（）{”中找到如下代码，这就是问题所在

   <div id="map"></div>
   <button onclick="map(15,90)" >15 90</button>
   <button onclick="map(22,80)" >22 80</button>

#map {
 height: 300px;
 width: 500px;
}
button{ width:70px;height:40px;}

function map(lat,lon){
  // jQuery(document).ready(function () {
  var centerPosition = new google.maps.LatLng(lat, lon);
  var options = {
    zoom: 16,
    center: centerPosition,
    mapTypeId: google.maps.MapTypeId.ROADMAP
   };
  var map = new google.maps.Map(document.getElementById("map"), options);
  //});
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>- jsFiddle demo</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
    <style type='text/css'>
        #map { height: 300px; width: 500px; }
        button { width: 70px; height: 40px;}
    </style>
    <script type='text/javascript'>
        function map(lat, lon) {
            var centerPosition = new google.maps.LatLng(lat, lon);
            var options = {
                zoom: 16,
                center: centerPosition,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), options);
        }
    </script>
</head>
<body>
    <div id="map"></div>
    <button onclick="map(15,90)">15 90</button>
    <button onclick="map(22,80)">22 80</button>
</body>
</html>