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

Dynamic google map creation using same division and variable

本文关键字：变量 动态 创建 谷歌地图 划分      更新时间：2023-09-26

我正试图使用以下脚本在相同的分区和相同的变量"map"上生成map onclick，它不起作用，我不知道如何销毁旧的map并重新创建，请有人帮助我。这是我迄今为止尝试的。。

这是 小提琴的链接

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

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>
相关文章：