在谷歌地图中添加标记

时间:2016-06-05 10:18:22

标签: javascript google-maps google-maps-api-3

以下是代码:

<div class="mgn-top-10">
                      <asp:Label ID="lbcontact" runat="server" ></asp:Label>



  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
        window.onload = function () {
            var lat = document.getElementById('latitude').innerHTML;
            var lan = document.getElementById('longitude').innerHTML;
            var mapOptions = {
                center: new google.maps.LatLng(lat, lan),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            google.maps.event.addListener(map, 'click', function (e) {
                document.getElementById('latitude').innerHTML= e.latLng.lat();
                document.getElementById('longitude').innerHTML = e.latLng.lng();

            });

        }

 </script>

            <asp:Label ID="latitude" runat="server" ForeColor ="#f8f5f5" ></asp:Label>

               <asp:Label ID="longitude" runat="server" ForeColor ="#f8f5f5" ></asp:Label>

    <div id="dvMap" style="width: 700px; height: 300px">
    </div>   </div>

我已经重复使用asp.net编写的Google地图代码,我想在地图中添加一个标记,这是我目前的大学任务。

请帮帮我。

谷歌地图已经完美运行,但没有标记。

提前致谢

建议:

<script type="text/javascript">
        window.onload = function () {
            var lat = document.getElementById('latitude').innerHTML;
            var lan = document.getElementById('longitude').innerHTML;
            var mapOptions = {
                center: new google.maps.LatLng(lat, lan),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            var myLatLng = {lat: -25.363, lng: 131.044};
            var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: 'Hello World!'
});
            google.maps.event.addListener(map, 'click', function (e) {
                document.getElementById('latitude').innerHTML= e.latLng.lat();
                document.getElementById('longitude').innerHTML = e.latLng.lng();

            });

        }

 </script>

1 个答案:

答案 0 :(得分:1)

来自the documentation

var myLatLng = {lat: -25.363, lng: 131.044};
var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: 'Hello World!'
});

使用您编辑的代码的结果如下所示:

enter image description here

如果您想在用户点击地图时添加标记,您可以这样做:

google.maps.event.addListener(map, 'click', function (e) {
    document.getElementById('latitude').innerHTML= e.latLng.lat();
    document.getElementById('longitude').innerHTML = e.latLng.lng();
    var myLatLng = {lat: e.latLng.lat(), lng: e.latLng.lng()};
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
});