doc
docs.mapbox.com/help/tutori… docs.mapbox.com/mapbox.js/a… docs.mapbox.com/help/tutori… developers.google.com/maps/docume…
googleMap 和 mapBox
初始化
mapbox
-
Creation
L.mapbox.map(element, id|url|tilejson, options)
- method setView( center, zoom?, <zoom/pan options> options? )
- event moveend
<script src='https://api.mapbox.com/mapbox.js/v3.2.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.2.1/mapbox.css' rel='stylesheet' />
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map', 'mapbox.streets');
.setView([40, -74.50], 9)
googleMap
developers.google.com/maps/docume…
marker
mapbox
- doc
-
Creation
L.marker( latlng, options? )
-
event
click
-
method
bindPopup
点击增加popup
bindPopup(<String> html | <HTMLElement> el | <Popup> popup,<Popup options> options? )
popup: docs.mapbox.com/mapbox.js/a…
还有一种geoJson直接多个渲染的方式
自定义marker
getFnbMarker(L) {
return function FnbMarker(map, markerConfig, callback = function() {}) {
const marker = L.marker(new L.LatLng(markerConfig.latlng.split(',')[0], markerConfig.latlng.split(',')[1]), {
draggable: false,
icon: L.divIcon({
className: 'fnb-map-marker',
html: `
<div class="icon">
<div class="text"></div>
</div>
`,
// Set a markers width and height.
iconSize: [32, 32]
})
})
.on('click', e => callback(e.originalEvent, _.extend(markerConfig, { isMapbox: true })))
// 这种还是可以关闭
// .bindPopup(`<div class="test">${JSON.stringify(markerConfig)}</div>`, {closeButton: false, offset: [-20, -40], className: '', closeOnClick: false})
.addTo(map);
// popup
L.popup({
closeButton: false, offset: [-20, -40], className: '', closeOnClick: false
}).setLatLng(new L.LatLng(markerConfig.latlng.split(',')[0], markerConfig.latlng.split(',')[1]))
.setContent(`<div class="test">${JSON.stringify(markerConfig)}</div>`).addTo(map)
return marker;
}
}
googleMap
-
自定义OverlayView(marker popup)
getFnbMarker(google) {
return class FnbMarker extends google.maps.OverlayView {
constructor(map, markerConfig, callback = function() {}) {
super();
this.markerConfig = markerConfig;
this.callback = callback;
this.LatLng = googleMapTool.getLatLng(...markerConfig.latlng.split(','));
this.width = markerConfig.width || 0;
this.height = markerConfig.height || 0;
this.className_ = markerConfig.className
this.content_ = markerConfig.content
this.setMap(map);
}
onAdd() {
this.elem = document.createElement('div');
const elem = this.elem;
elem.style.display = 'none';
elem.style.width = this.width + 'px';
elem.style.height = this.height + 'px';
elem.className = this.className_
elem.innerHTML = this.content_
google.maps.event.addDomListener(elem, "click", e => this.callback(e, this.markerConfig));
// info window
google.maps.event.addDomListener(elem, "click", e =>{
const infowindow = new google.maps.InfoWindow({
content: '222222'
});
infowindow.open(this.map, this);
});
this.getPanes().overlayImage.appendChild(elem);
}
draw() {
const point = this.getProjection().fromLatLngToDivPixel(this.LatLng);
if (point) {
this.elem.style.left = (point.x - this.width / 2) + 'px';
this.elem.style.top = (point.y - this.height) + 'px';
this.elem.style.display = 'block';
}
}
onRemove() {
if (this.elem) {
this.elem.parentNode.removeChild(this.elem);
this.elem = null;
}
}
getPosition() {
return this.LatLng;
}
}
}
// 使用
const FnbMarker = googleMapTool.getFnbMarker(google);
googleConfig.markerList = markerList;
googleConfig.slice.forEach(config => {
new FnbMarker(pageMap, Object.assign({}, config, {
className: 'popup-tip-anchor',
content: `
<div class="popup-bubble-anchor">
<div class="popup-bubble-content">
<b>test</b>
</div>
</div>
`
}));
});
<style>
.popup-tip-anchor {
height: 0;
position: absolute;
/* The max width of the info window. */
width: 200px;
}
/* The bubble is anchored above the tip. */
.popup-bubble-anchor {
position: absolute;
width: 100%;
bottom: /* TIP_BOTTOM_FROM_MARK_CENTER= */ 45px;
left: 0;
}
/* Draw the tip. */
.popup-bubble-anchor::after {
content: "";
position: absolute;
top: 0;
left: 0;
/* Center the tip horizontally. */
transform: translate(-50%, 0);
/* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
width: 0;
height: 0;
/* The tip is 8px high, and 12px wide. */
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: /* TIP_HEIGHT= */ 8px solid white;
}
/* The popup bubble itself. */
.popup-bubble-content {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -100%);
/* Style the info window. */
background-color: white;
padding: 5px;
border-radius: 5px;
font-family: sans-serif;
overflow-y: auto;
max-height: 60px;
box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.5);
}
</style>
- 自定义OverlayView(marker popup) blog.csdn.net/weixin_3066…
remove marker
- 将所有marker都储存起来然后全部remove
// mapbox
var marker = new mapboxgl.Marker().addTo(map);
marker.remove(); // 多个依次删除
// googleMap
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
- 删除对应所有marker元素
$( ".marker" ).remove();
看不到的时候定位到原来的中心点
- 如何判断看不到初始点位置？
回到初始位置
mapbox
const options = mapboxConfig.mapOptions;
const coo = new L.LatLng(options.latlng.split(',')[0], options.latlng.split(',')[1]);
pageMap.setView(coo, options.base.zoom)
resetMarker();
googlemap
pageMap.setZoom(googleConfig.mapOptions.base.zoom);
pageMap.setCenter(googleMapTool.getLatLng(...googleConfig.mapOptions.latlng.split(',')));
resetMarker();
