百度地图api里marker标注上如何加上数字(见下图)？ - 知乎19被浏览13239分享邀请回答1添加评论分享收藏感谢收起1添加评论分享收藏感谢收起查看更多回答一、使用到的文件
leaflet.css
jquery-1.11.1.min.js
leaflet.js
leaf-green.png
leaf-orange.png
leaf-red.png
leaf-shadow.png
这个列子挺简单的，用的官网给的出的列子，图片也可以从官网找到。
&!DOCTYPE html&
&title&使用自己的图标替换marker图标&/title&
&link rel="stylesheet" href="/leaflet@1.0.3/dist/leaflet.css" /&
&script src="/jquery-1.11.1.min.js"&&/script&
&script src="/leaflet@1.0.3/dist/leaflet.js"&&/script&
&div id="map" style="width:500height:500"&&/div&
&script type="text/javascript"&
$(function(){
var map = L.map('map', {
center: [<span style="background-color: #f5f5f5; color: #, <span style="background-color: #f5f5f5; color: #0],
zoom: <span style="background-color: #f5f5f5; color: #
L.tileLayer("http://t{s}./img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
subdomains: ["<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #"]
}).addTo(map);
// 地名标注
L.tileLayer("http://t{s}./cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
subdomains: ["<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #"]
}).addTo(map);
L.tileLayer("http://t{s}./ibo_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ibo&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
subdomains: ["<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #", "<span style="background-color: #f5f5f5; color: #"]
}).addTo(map);
// 使用用户自己的图标
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
[<span style="background-color: #f5f5f5; color: #, <span style="background-color: #f5f5f5; color: #], // size of the icon
shadowSize:
[<span style="background-color: #f5f5f5; color: #, <span style="background-color: #f5f5f5; color: #], // size of the shadow
iconAnchor:
[<span style="background-color: #f5f5f5; color: #, <span style="background-color: #f5f5f5; color: #], // point of the icon which will correspond to marker's location
shadowAnchor: [<span style="background-color: #f5f5f5; color: #, <span style="background-color: #f5f5f5; color: #],
// the same for the shadow
popupAnchor:
[-<span style="background-color: #f5f5f5; color: #, -<span style="background-color: #f5f5f5; color: #] // point from which the popup should open relative to the iconAnchor
L.marker([<span style="background-color: #f5f5f5; color: #, <span style="background-color: #f5f5f5; color: #2], {icon: greenIcon}).addTo(map);
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: 'leaf-shadow.png',
[<span style="background-color: #f5f5f5; color: #, <span style="background-color: #f5f5f5; color: #],
shadowSize:
[<span style="background-color: #f5f5f5; color: #, <span style="background-color: #f5f5f5; color: #],
iconAnchor:
[<span style="background-color: #f5f5f5; color: #, <span style="background-color: #f5f5f5; color: #],
shadowAnchor: [<span style="background-color: #f5f5f5; color: #, <span style="background-color: #f5f5f5; color: #],
popupAnchor:
[-<span style="background-color: #f5f5f5; color: #, -<span style="background-color: #f5f5f5; color: #]
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});
L.icon = function (options) {
return new L.Icon(options);
L.marker([<span style="background-color: #f5f5f5; color: #.5, <span style="background-color: #f5f5f5; color: #.09], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
L.marker([<span style="background-color: #f5f5f5; color: #.495, <span style="background-color: #f5f5f5; color: #0.083], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");
L.marker([<span style="background-color: #f5f5f5; color: #.49, <span style="background-color: #f5f5f5; color: #1.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");
三、效果图
阅读(...) 评论()回复不能为空取消确定
回复不能为空取消确定
请输入内容}