当我为传单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 });
原文地址:https://www.jb51.cc/js/155471.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。