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

时间:2014-04-22 01:49:02

标签: javascript jquery html css google-maps

我正在尝试使用以下脚本生成相同分区和相同变量“ map ”的地图onclick,它不起作用,我不知道如何破坏旧地图并重新创建请有人帮助我..这是我到目前为止所尝试的......

以下是 fiddle的链接

JS

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);
  });
 }

var lat =22, lon = 75;
map(lat,lon);

HTML

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

CSS

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

1 个答案:

答案 0 :(得分:1)

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>