1

这是JS代码。我有两个不同的图像，我将在地图上放置一个标记，称为 DRAGGABLE 和 DRAGGABLE2。地图加载一个 kml 文件。

 <script type="text/javascript">
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e) {
    var point=new google.maps.Point(e.pageX -27,e.pageY -106);
    var ll= overlay.getProjection().fromContainerPixelToLatLng(point);
    placeMarker(ll, 'alert.png');
    }
});

$("#draggable2").draggable({helper: 'clone',
stop: function(e) {
    var point=new google.maps.Point(e.pageX - 27,e.pageY -106);
    var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
    placeMarker(ll, 'facebook.png');
    }
});
});
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var map;
var overlay;
var markers = {};
function initialize() {

  var myOptions = {
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var ctaLayer = new google.maps.KmlLayer('test.kml');
    ctaLayer.setMap(map);

  overlay = new google.maps.OverlayView();
  overlay.draw = function() {};
  overlay.setMap(map);
}

function placeMarker(location,imgdrag) {
  var currentMrkMap; 
  currentMrkMap = parseInt(document.getElementById('mrkadd').value);
  currentMrkMap += 1;
  document.getElementById('mrkadd').value = currentMrkMap;
  document.getElementById('mrkelements').innerHTML += 'TestCodeHtmlIntoDIV';


  var marker = new google.maps.Marker({
        id: 'marker_' + currentMrkMap, 
        position: location, 
        draggable: true,
        map: map,
        icon:'img/'+imgdrag

  });
  id = 'marker_' + currentMrkMap;
  markers[id] = marker;

  var infowindow = new google.maps.InfoWindow({
        content: 'Add element <br><textarea id="txtAr" name="txtAr" rows="5" ></textarea><br>'
  });
  infowindow.open(map,marker);

  google.maps.event.addListener(marker,'click',function() {
      var coords = this.getPosition();
      var infowindow = new google.maps.InfoWindow({
        content: 'Add element <br><textarea id="txtAr" name="txtAr" rows="5" >' +  coords +'</textarea><br>'
      });
      infowindow.open(map,marker);
  });

  google.maps.event.addListener(marker, "dragend", function() {
      var coordinates = document.getElementById("txtAr");
      var coords = this.getPosition();
      coordinates.value= coords.lat() + ' '+ coords.lng();

  });

}
</script>

CSS 代码。正文和侧边栏来自引导程序。

<style type="text/css"> 
  body {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .sidebar-nav {
    padding: 9px 0;
  }
  #map_canvas {         
    width: 100%;
    height: 530px;  
  }
</style>

而 HTML 代码是基于 Bootstrap 的。我地图的部分是这样的

<div class="span9"> 
    <div class="hero-unit">             
        <div id="map_canvas"></div>            
     </div>           
</div><!--/span-->
4

0 回答 0