javascript – leafletjs自定义标记位置不对

前端之家收集整理的这篇文章主要介绍了javascript – leafletjs自定义标记位置不对前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我为传单js添加自定义标记图标时,标记图标位置不正确.

当我使用自定义标记http://jsfiddle.net/amrana83/7k5Jr/时,这是一个小提琴

这是我使用自定义标记时的代码

<style>
  html,body,#map {
    height: 500px;
    width: 800px;
    margin: 0px;
    padding: 0px
  }
  .leaflet-map-pane {
    z-index: 2 !important;
  }

  .leaflet-google-layer {
    z-index: 1 !important;
  }
</style>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
  <body>
    <div id="map"></div>
    <script>
      var map = new L.Map('map',{center: new L.LatLng(51.5,-0.09),zoom: 4});
      var googleLayer = new L.Google('ROADMAP');
      map.addLayer(googleLayer);
      var greenIcon = new L.Icon({iconUrl: 'http://technobd.rvillage.com/application/modules/Rvillage/externals/images/all_members.png'});
      L.marker([51.5,-0.09],{icon: greenIcon}).bindPopup("I am a green leaf.").addTo(map);//using custom marker
      L.marker([60.5,{}).bindPopup("I am a green leaf.").addTo(map);
    </script>
  </body>

当我不使用自定义标记http://jsfiddle.net/amrana83/8skPU/1/时,这是一个小提琴

这是我不使用自定义标记时的代码

<style>
  html,zoom: 4});
      var googleLayer = new L.Google('ROADMAP');
      map.addLayer(googleLayer);
      L.marker([51.5,{}).bindPopup("I am a green leaf.").addTo(map);//not using custom marker
      L.marker([60.5,{}).bindPopup("I am a green leaf.").addTo(map);
    </script>
  </body>

解决方法

你必须指定图标的大小,如下所示:
var greenIcon = new L.Icon({
    iconUrl: 'http://technobd.rvillage.com/application/modules/Rvillage/externals/images/all_members.png',iconSize: [41,51],// size of the icon
    iconAnchor: [20,// point of the icon which will correspond to marker's location
    popupAnchor: [0,-51] // point from which the popup should open relative to the iconAnchor                                 
});

猜你在找的JavaScript相关文章