Question

我想自定义Google Map API标记。我想要实现的目标是，用户可以选择自定义图标（图像）并将其拖放到Google地图中。

我想要实现的功能如下： - Reference URL

我想我已经取得了一些成就但并非如此。请帮我找出消息

这是我的HTML和JavaScript代码： -

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
  *{
    margin: 0px;
    padding: 0px;
  }
  html {
    height: 100% }
  body{
    height: 100%;
    margin: 0px;
    padding: 0px;
  }
  #map_canvas {
    height: 100% }
  #shelf{
    position:fixed;
    top:10px;
    right:500px;
    height:100px;
    width:200px;
  }
  .draggable {
    position:absolute;
    top:10px, left:10px;
    width: 30px;
    height: 30px;
    z-index:1000000000;
  }

  ul{
    display:block;
    list-style:none;
    overflow:hidden;
  }
  ul li{
    display:block;
    height:30px;
    margin:0 0 10px;
    overflow:hidden;
  }
</style>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

//on dom ready
$(document).ready(function() {
    $(".draggable").draggable({
        helper: 'clone',
        stop: function(e) {
            var point = new google.maps.Point(e.pageX,e.pageY),
                place = overlay.getProjection().fromContainerPixelToLatLng(point);
                placeMarker(place);

                alert(place);

                var myLocationMarker = new google.maps.Marker({
                    draggable: true
                } );

            myLocationMarker.setPosition(point);

            google.maps.event.addListener(myLocationMarker, 'dragend', function (event) {
              // closure is called when draggin ends
              alert("poisition "+this.getPosition());
            });

            myLocationMarker.setAnimation(google.maps.Animation.DROP);

            myLocationMarker.setMap(map);
        }
    });

    //invoking initialize method to create map
    initialize();
});

var $map,
    $latlng,
    overlay;

function initialize() {
    // creating map
    var $latlng = new google.maps.LatLng(66.5, 25.733333),
        myOptions = {
                zoom: 3,
                center: $latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,

                mapTypeControlOptions:  {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                    position: google.maps.ControlPosition.TOP_LEFT 
                },
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE,
                    position: google.maps.ControlPosition.LEFT_TOP
                },
                scaleControl: true,
                scaleControlOptions:    {
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                streetViewControl: false,
                panControl:false,
        };

        $map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

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

        };
        overlay.setMap($map);


}

function placeMarker(location) {
    var marker = new google.maps.Marker({
      position: location, 
      map: $map,
      icon:'spring-hot.png' // hiding default map icon
    });
}
</script>
</head>
<body>
    <div id="map_canvas" style="width:50%;height:50%"></div>
    <div id='shelf'>
      <ul>
        <li><img src="images/1.png" class="draggable" /></li>
        <li><img src="images/2.png" class="draggable" /></li>
        <li><img src="images/3.png" class="draggable" /></li>
      </ul>
    </div>
</body>
</html>

提前致谢!!

如何自定义Google Map API标记？

0 个答案: