Javascript 自定义标记位置不正确_Javascript_Leaflet

Javascript 自定义标记位置不正确

javascript leaflet

Javascript 自定义标记位置不正确,javascript,leaflet,Javascript,Leaflet,当我为传单js添加自定义标记图标时，标记图标的位置不正确当我使用自定义标记时，这里有一把小提琴下面是我使用自定义标记时的代码 <style> html, body, #map { height: 500px; width: 800px; margin: 0px; padding: 0px } .leaflet-map-pane { z-index: 2 !important; } .leaflet-google-lay

当我为传单js添加自定义标记图标时，标记图标的位置不正确

当我使用自定义标记时，这里有一把小提琴

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

<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, -0.09], {}).bindPopup("I am a green leaf.").addTo(map);
    </script>
  </body>

<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);
      L.marker([51.5, -0.09], {}).bindPopup("I am a green leaf.").addTo(map);//not using custom marker
      L.marker([60.5, -0.09], {}).bindPopup("I am a green leaf.").addTo(map);
    </script>
  </body>


html，body，#map{
高度：500px；
宽度：800px；
边际：0px；
填充：0px
}
.单张地图窗格{
z指数：2！重要；
}
.传单谷歌层{
z指数：1！重要；
}
var-map=newl.map（'map'，{中心：newl.LatLng（51.5，-0.09），缩放：4}）；
var googleLayer=newl.Google（“路线图”）；
map.addLayer（googleLayer）；
var greenIcon=新的L.Icon（{iconUrl:'http://technobd.rvillage.com/application/modules/Rvillage/externals/images/all_members.png'});
L.marker（[51.5，-0.09]，{icon:greenIcon}）.bindpoop（“我是一片绿叶”）.addTo（地图）//使用自定义标记
L.marker（[60.5，-0.09]，{}）.bindpoop（“我是一片绿叶”）.addTo（地图）；

这是一把小提琴，当我不使用自定义标记时

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

<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, -0.09], {}).bindPopup("I am a green leaf.").addTo(map);
    </script>
  </body>

<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);
      L.marker([51.5, -0.09], {}).bindPopup("I am a green leaf.").addTo(map);//not using custom marker
      L.marker([60.5, -0.09], {}).bindPopup("I am a green leaf.").addTo(map);
    </script>
  </body>


html，body，#map{
高度：500px；
宽度：800px；
边际：0px；
填充：0px
}
.单张地图窗格{
z指数：2！重要；
}
.传单谷歌层{
z指数：1！重要；
}
var-map=newl.map（'map'，{中心：newl.LatLng（51.5，-0.09），缩放：4}）；
var googleLayer=newl.Google（“路线图”）；
map.addLayer（googleLayer）；
L.marker（[51.5，-0.09]，{}）.bindPopup（“我是一片绿叶”）.addTo（地图）//不使用自定义标记
L.marker（[60.5，-0.09]，{}）.bindpoop（“我是一片绿叶”）.addTo（地图）；

您必须指定图标的大小，如下所示：

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, 51], // 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                                 
});

当我看到我看到使用自定义标记图标时，我必须更改图标的位置使图标位置正确，我们可以更改以正确定位它

这是我解决问题后的一把小提琴

你可以这样试试，很简单：）

第一次为标记创建CSS
.cd单点{
位置：绝对；
列表样式类型：无；
左：左位置px；
顶部：顶部位置px；
}
然后调用Javascript调整位置，如下所示

div.style.left=（point.x-（left_pos/2））+'px'
div.style.top=（point.y-（top_pos/2））+“px”

。。。我想这取决于你收到的案子您可以更改“增量位置”的值。这是我的结果

希望这有帮助

感谢您的回复，这非常接近解决方案，所以我接受这一点。