Javascript 如何在单击按钮时加载地图_Javascript_Html_Google Maps

Javascript 如何在单击按钮时加载地图

javascript html google-maps

Javascript 如何在单击按钮时加载地图,javascript,html,google-maps,Javascript,Html,Google Maps,正在尝试实施以下操作，但不起作用 <script> function loadmap(lat,lng) { //alert("lat,lang"); var point = new google.maps.LatLng('12.9833','77.5833'); document.getElementById("menu").disabled=tr

正在尝试实施以下操作，但不起作用

<script>
     function loadmap(lat,lng)
                {
                //alert("lat,lang");
                var point = new google.maps.LatLng('12.9833','77.5833');
                document.getElementById("menu").disabled=true;
              }
    </script>
<body>
<div id="container">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">World Traveler</h1></div>

<div id="menu" style="background-color:#FFD700;height:800px;width:100px;float:left;">
<table border="0">
<tr>
<th>Cities</th>
</tr>
<tr>
<td onclick="loadMap('40.44','83.43');">newyork</td>
</tr>
<tr>
<td onclick="loadMap('42.3295','-83.1908');">Michigan</td>
</tr>
script type="text/javascript">
        var map;
        var markersArray = [];

        function initialize()
        {
            var latlng = new google.maps.LatLng(12.9833, 77.5833);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


            // add a click event handler to the map object
            google.maps.event.addListener(map, "click", function(event)
            {
                // place a marker
                placeMarker(event.latLng);

                // display the lat/lng in your form's lat/lng fields
                document.getElementById("latFld").value = event.latLng.lat();
                document.getElementById("lngFld").value = event.latLng.lng();
            });
        }
        function placeMarker(location) {
            // first remove all markers if there are any
            deleteOverlays();

            var marker = new google.maps.Marker({
                position: location,
                icon: "http://localhost:8080/HTML5/pin_blue.png",
                map: map
            });

            // add marker in markers array
            markersArray.push(marker);

            //map.setCenter(location);
        }

        // Deletes all markers in the array by removing references to them
        function deleteOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            markersArray.length = 0;
            }
        }
    </script>


功能负荷图（lat、lng）
{
//警惕（“拉特，朗”）；
var point=new google.maps.LatLng（'12.9833'，'77.5833'）；
document.getElementById（“菜单”）.disabled=true；
}
世界旅行者
城市
纽约
密歇根
script type=“text/javascript”>
var映射；
var-markersArray=[]；
函数初始化（）
{
var latlng=新的google.maps.latlng（12.9833,77.5833）；
变量myOptions={
缩放：10，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
//将单击事件处理程序添加到映射对象
google.maps.event.addListener（映射，“单击”，函数（事件）
{
//放置标记
地点标记（事件标记）；
//在表单的lat/lng字段中显示lat/lng
document.getElementById（“latFld”）.value=event.latLng.lat（）；
document.getElementById（“lngFld”）.value=event.latLng.lng（）；
});
}
功能位置标记（位置）{
//首先删除所有标记（如果有）
deleteOverlays（）；
var marker=new google.maps.marker({
位置:位置,，
图标：“http://localhost:8080/HTML5/pin_blue.png",
地图：地图
});
//在标记数组中添加标记
markersArray.push（marker）；
//地图设置中心（位置）；
}
//通过删除对数组中所有标记的引用来删除这些标记
函数deleteOverlays（）{
if（markersArray）{
for（markersArray中的i）{
markersArray[i].setMap（空）；
}
markersArray.length=0；
}
}

当用户点击菜单时，应该显示带有标记的特定地图。我在js中实现了这一点…欢迎提供任何帮助

您的

loadMap

函数现在没有执行任何操作。您需要在地图上您在

loadMap

功能中创建的

LatLng

处放置一个标记

function loadmap(lat,lng) {
    //alert("lat,lang");
    var point = new google.maps.LatLng('12.9833','77.5833');
    placeMarker(point);
    document.getElementById("menu").disabled=true;
}

检查javascript调试控制台。我认为这是因为您在

中的调用是对

'loadMap（）'

的，但函数名为

loadMap（）

。Javascript区分大小写

但是您仍然需要更新loadmap函数，因为它目前没有做任何事情。大概是这样的：

    <table border="0">
         <tr>
            <th>Cities</th>
         </tr>
         <tr>
             <td onclick="loadMap('40.44','83.43');">newyork</td>
         </tr>
         <tr>
              <td onclick="loadMap('42.3295','-83.1908');">Michigan</td>
         </tr>
      <table>
    <div id="map_canvas" style="width:400px; height:400px"></div>
          <p>latitude: <span id="lat"></span></p>
          <p>longitude: <span id="lng"></span></p>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      var map;
      var home;
      var markersArray = [];

      function initialize() {
           home = new google.maps.LatLng('12.9833','77.5833');   
           var opts = {
                zoom: 8,
                center: home,
                mapTypeId: google.maps.MapTypeId.ROADMAP
           };

           map = new google.maps.Map(document.getElementById('map_canvas'), opts);
           google.maps.event.addListener(map, "click", function(event) {
                  showMarker(event.latLng);
               });    

      }

      function loadMap(lat,lng)
           {
               var location= new google.maps.LatLng(lat, lng);
               map.setCenter(location);
               document.getElementById("lat").innerHTML = location.lat();
               document.getElementById("lng").innerHTML = location.lng();
           }

        function showMarker(location) {    
               deleteOverlays();               
               var marker = new google.maps.Marker({
                   position: location,
                   map: map
               });
               markersArray.push(marker);
               document.getElementById("lat").innerHTML = location.lat();
               document.getElementById("lng").innerHTML = location.lng();
        }


       function deleteOverlays() {
            if (markersArray) {
                for (i=0; i < markersArray.length; i++) {
                    markersArray[i].setMap(null);
                }
            markersArray.length = 0;
            }
        }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>


城市
纽约
密歇根
纬度：
经度：
var映射；
var home；
var-markersArray=[]；
函数初始化（）{
home=newgoogle.maps.LatLng（'12.9833'，'77.5833'）；
变量选项={
缩放：8，
中心：家，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map_canvas'），opts）；
google.maps.event.addListener（映射，“单击”，函数（事件）{
showMarker（event.latLng）；
});    
}
功能负荷图（lat、lng）
{
var location=新的google.maps.LatLng（lat，lng）；
地图设置中心（位置）；
document.getElementById（“lat”）.innerHTML=location.lat（）；
document.getElementById（“lng”）.innerHTML=location.lng（）；
}
函数showMarker（位置）{
deleteOverlays（）；
var marker=new google.maps.marker({
位置:位置,，
地图：地图
});
markersArray.push（marker）；
document.getElementById（“lat”）.innerHTML=location.lat（）；
document.getElementById（“lng”）.innerHTML=location.lng（）；
}
函数deleteOverlays（）{
if（markersArray）{
对于（i=0；i

请显示完整的HTML，因为您需要的不仅仅是上面的代码，才能将Google Mapscheck用于“Hello World”示例（此外，元素没有“disabled”属性）loadmap函数的状态错误。需要知道如何实现该函数。是的，我已经放置了一个标记，但是当数据对象被clciked时，映射没有加载。何时调用

initialize（）

？而

map\u canvas

元素在哪里？你有JavaScript错误吗？我有初始化..没有错误..onload函数中的代码不工作..它必须从onclick获取lat lng，函数应该运行..无法考虑如何准确地实现它您打开了JavaScript控制台吗？有什么不好的地方吗？嘿，你的loadMap正在工作，但是现在的initize（）方法不起作用了..plzz helpyes谢谢..我的也在使用你的代码..但是现在initize（）方法不起作用了，你能帮我解释一下为什么我的placemarker乐趣没有发挥出来吗这是因为deleteOverlays（）函数有一些问题（）请查看我更新的小提琴：