按钮添加标记到谷歌地图不起作用

时间:2015-11-08 22:21:08

标签: javascript google-maps

  	Long = -40.00;
    Lati = 150.00;
	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 10,
		center: new google.maps.LatLng( Long, Lati),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});
    
    var marker = new google.maps.Marker({
		position: new google.maps.LatLng( Long, Lati),
		map: map
	});
    
    function AddMarker() {
    	var Long = document.getElementById('longitude').value;
        var Lati = document.getElementById('latitude').value;
        
        var map = google.maps.Map(document.getElementById('map'));

    	var marker = new google.maps.Marker({
        	position: new google.maps.LatLng( Long, Lati),
			map: map
		});
    }
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js" 
          type="text/javascript"></script>
</head> 
<body>
<div>
	Long :<input type="text" id="longitude" size="10" value="-40.20">
    Lati :<input type="text" id="latitude" size="10" value="150.00">
    <input type="submit" onclick="AddMarker()" value="Add">
</div>
  <div id="map" style="width: 500px; height: 400px;"></div>
</body>

您好
添加一个标记的按钮不起作用,任何想法为什么?
如果我在var map变量上使用“new”它将起作用,但它将创建并清除已存在的标记。

提前致谢

1 个答案:

答案 0 :(得分:1)

以下是代码的外观,我删除了不必要的代码行:

  

var map = google.maps.Map(document.getElementById(&#39; map&#39;));

JS:

    var Long = -40.00;
    var Lati = 150.00;

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng( Long, Lati),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });



function AddMarker() {
        Long = document.getElementById('longitude').value;
        Lati = document.getElementById('latitude').value;


        var marker = new google.maps.Marker({
            position: new google.maps.LatLng( Long, Lati),
            map: map
        });
    }

小提琴: https://jsfiddle.net/wexd3spp/8/