Javascript 单击按钮向google地图添加标记_Javascript_Google Maps_Google Maps Markers

Javascript 单击按钮向google地图添加标记

javascript google-maps

Javascript 单击按钮向google地图添加标记,javascript,google-maps,google-maps-markers,Javascript,Google Maps,Google Maps Markers,我有下面的代码，我正在使用谷歌地图覆盖图像。我在这张地图上硬编码了一个标记。在我的页面中，我需要在“添加标记”按钮上添加标记，单击获取纬度和经度输入。如何在此按钮上单击地图上的标记 <html> <head> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/lib

我有下面的代码，我正在使用谷歌地图覆盖图像。我在这张地图上硬编码了一个标记。在我的页面中，我需要在“添加标记”按钮上添加标记，单击获取纬度和经度输入。如何在此按钮上单击地图上的标记

<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-map/3.0-rc1/jquery.ui.map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>  
<style>
  #map {
    height: 90%;
  }
  html, body {
    height: 90%;
    margin: 0;
    padding: 0;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?key= xxx"></script>
<script>
  var overlay;

  MapOverlay.prototype = new google.maps.OverlayView();

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: {lat: 9.877717, lng: 79.694586},
      mapTypeId: 'satellite'
    });

    var myLatLng = {lat: 9.8, lng: 79.9};
    //adding a marker
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map
    });

    var bounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(9.71088992, 79.6855391),
        new google.maps.LatLng(9.9351849, 80.048088));

    var srcImage = 'file:///home/../abc.jpg';

    overlay = new MapOverlay(bounds, srcImage, map);
  }

  function MapOverlay(bounds, image, map) {

    ........
  }

  MapOverlay.prototype.onAdd = function() {

    .............
  };


  google.maps.event.addDomListener(window, 'load', initMap);
</script>
 </head>
 <body>
Latitude : <input type="text" placeholder="Latitude" id="lat"/>
Longitude : <input type="text" placeholder="Longitude" id="lng"/>
<button type="button" id="addMarkerBtnId">Add Marker</button>
<br/><br/>
<div id="map"></div>


#地图{
身高：90%；
}
html，正文{
身高：90%；
保证金：0；
填充：0；
}
var叠加；
MapOverlay.prototype=new google.maps.OverlayView（）；
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：{lat:9.877717，lng:79.694586}，
mapTypeId:'卫星'
});
var Mylatng={lat:9.8，lng:79.9}；
//添加标记
var marker=new google.maps.marker({
职位：myLatLng，
地图：地图
});
var bounds=new google.maps.LatLngBounds(
新的google.maps.LatLng（9.71088992,79.6855391），
新的google.maps.LatLng（9.9351849,80.048088））；
var srcImage=file:///home/../abc.jpg';
覆盖=新地图覆盖（边界、srcImage、地图）；
}
函数MapOverlay（边界、图像、贴图）{
........
}
MapOverlay.prototype.onAdd=函数（）{
.............
};
google.maps.event.addDomListener（窗口'load'，initMap）；
纬度：
经度：
添加标记

一个选项是使用该功能：

google.maps.event.addDomListener(document.getElementById('addMarkerBtnId'), 'click', function(evt) {
   var marker = new google.maps.Marker({
     position: {
     lat: parseFloat(document.getElementById('lat').value),
     lng: parseFloat(document.getElementById('lng').value)},
     map: map
   });
});

代码片段：

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：{
纬度：9.877717，
液化天然气：79.694586
},
mapTypeId:'卫星'
});
var mylatng={
lat:9.8，
液化天然气：79.9
};
//添加标记
var marker=new google.maps.marker({
职位：myLatLng，
地图：地图
});
google.maps.event.addDomListener（document.getElementById（'addMarkerBtnId'），'click'，函数（evt）{
var marker=new google.maps.marker({
职位：{
lat:parseFloat（document.getElementById（'lat'）.value），
lng:parseFloat（document.getElementById（'lng'）.value）
},
地图：地图
});
});
}
google.maps.event.addDomListener（窗口'load'，initMap）
html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

纬度：
经度：
添加标记




一个选项是使用该功能：
google.maps.event.addDomListener(document.getElementById('addMarkerBtnId'), 'click', function(evt) {
   var marker = new google.maps.Marker({
     position: {
     lat: parseFloat(document.getElementById('lat').value),
     lng: parseFloat(document.getElementById('lng').value)},
     map: map
   });
});


代码片段：

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：{
纬度：9.877717，
液化天然气：79.694586
},
mapTypeId:'卫星'
});
var mylatng={
lat:9.8，
液化天然气：79.9
};
//添加标记
var marker=new google.maps.marker({
职位：myLatLng，
地图：地图
});
google.maps.event.addDomListener（document.getElementById（'addMarkerBtnId'），'click'，函数（evt）{
var marker=new google.maps.marker({
职位：{
lat:parseFloat（document.getElementById（'lat'）.value），
lng:parseFloat（document.getElementById（'lng'）.value）
},
地图：地图
});
});
}
google.maps.event.addDomListener（窗口'load'，initMap）
html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

纬度：
经度：
添加标记