Added polygon functional for OpenStreet, Tencent and Google Latest Value Maps
This commit is contained in:
Maksym Dudnik
parent
61fd0867e2
commit
43b0ac6b5b
@ -314,6 +314,48 @@ export default class TbGoogleMap {
|
|||||||
polyline.setMap(null);
|
polyline.setMap(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
createPolygon(latLangs, settings) {
|
||||||
|
let polygon = new google.maps.Polygon({
|
||||||
|
map: this.map,
|
||||||
|
paths: latLangs,
|
||||||
|
strokeColor: settings.polygonStrokeColor,
|
||||||
|
strokeOpacity: settings.polygonStrokeColor,
|
||||||
|
fillColor: settings.polygonColor,
|
||||||
|
fillOpacity: settings.polygonOpacity,
|
||||||
|
strokeWeight: settings.polygonStrokeWeight
|
||||||
|
});
|
||||||
|
return polygon;
|
||||||
|
}
|
||||||
|
/* eslint-disable no-undef */
|
||||||
|
|
||||||
|
removePolygon (polygon) {
|
||||||
|
polygon.setMap(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* eslint-disable no-undef,no-unused-vars */
|
||||||
|
updatePolygonColor (polygon, settings, color) {
|
||||||
|
let options = {
|
||||||
|
paths: polygon.getPaths(),
|
||||||
|
map: this.map,
|
||||||
|
strokeColor: color,
|
||||||
|
fillColor: color,
|
||||||
|
strokeWeight: settings.polygonStrokeWeight
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
/* eslint-disable no-undef ,no-unused-vars*/
|
||||||
|
|
||||||
|
|
||||||
|
getPolygonLatLngs(polygon) {
|
||||||
|
return polygon.getPaths().getArray();
|
||||||
|
}
|
||||||
|
|
||||||
|
setPolygonLatLngs(polygon, latLngs) {
|
||||||
|
polygon.setPaths(latLngs);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* eslint-disable no-undef */
|
/* eslint-disable no-undef */
|
||||||
fitBounds(bounds) {
|
fitBounds(bounds) {
|
||||||
if (this.dontFitMapBounds && this.defaultZoomLevel) {
|
if (this.dontFitMapBounds && this.defaultZoomLevel) {
|
||||||
|
|||||||
@ -369,6 +369,21 @@ export default class TbImageMap {
|
|||||||
removePolyline(/*polyline*/) {
|
removePolyline(/*polyline*/) {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
createPolygon(/*latLangs, settings*/) {
|
||||||
|
}
|
||||||
|
|
||||||
|
removePolygon(/*latLangs, settings*/) {
|
||||||
|
}
|
||||||
|
|
||||||
|
updatePolygonColor(/*latLangs, settings*/) {
|
||||||
|
}
|
||||||
|
|
||||||
|
getPolygonLatLngs(/*latLangs, settings*/) {
|
||||||
|
}
|
||||||
|
|
||||||
|
setPolygonLatLngs(/*latLangs, settings*/) {
|
||||||
|
}
|
||||||
|
|
||||||
fitBounds() {
|
fitBounds() {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -19,234 +19,270 @@ import 'leaflet-providers';
|
|||||||
|
|
||||||
export default class TbOpenStreetMap {
|
export default class TbOpenStreetMap {
|
||||||
|
|
||||||
constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, mapProvider) {
|
constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, mapProvider) {
|
||||||
|
|
||||||
this.utils = utils;
|
this.utils = utils;
|
||||||
this.defaultZoomLevel = defaultZoomLevel;
|
this.defaultZoomLevel = defaultZoomLevel;
|
||||||
this.dontFitMapBounds = dontFitMapBounds;
|
this.dontFitMapBounds = dontFitMapBounds;
|
||||||
this.minZoomLevel = minZoomLevel;
|
this.minZoomLevel = minZoomLevel;
|
||||||
this.tooltips = [];
|
this.tooltips = [];
|
||||||
|
|
||||||
if (!mapProvider) {
|
if (!mapProvider) {
|
||||||
mapProvider = "OpenStreetMap.Mapnik";
|
mapProvider = "OpenStreetMap.Mapnik";
|
||||||
}
|
}
|
||||||
|
|
||||||
this.map = L.map($containerElement[0]).setView([0, 0], this.defaultZoomLevel || 8);
|
this.map = L.map($containerElement[0]).setView([0, 0], this.defaultZoomLevel || 8);
|
||||||
|
|
||||||
var tileLayer = L.tileLayer.provider(mapProvider);
|
var tileLayer = L.tileLayer.provider(mapProvider);
|
||||||
|
|
||||||
tileLayer.addTo(this.map);
|
tileLayer.addTo(this.map);
|
||||||
|
|
||||||
if (initCallback) {
|
if (initCallback) {
|
||||||
setTimeout(initCallback, 0); //eslint-disable-line
|
setTimeout(initCallback, 0); //eslint-disable-line
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
inited() {
|
inited() {
|
||||||
return angular.isDefined(this.map);
|
return angular.isDefined(this.map);
|
||||||
}
|
}
|
||||||
|
|
||||||
updateMarkerLabel(marker, settings) {
|
updateMarkerLabel(marker, settings) {
|
||||||
marker.unbindTooltip();
|
marker.unbindTooltip();
|
||||||
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
|
marker.bindTooltip('<div style="color: ' + settings.labelColor + ';"><b>' + settings.labelText + '</b></div>',
|
||||||
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
|
{className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset});
|
||||||
}
|
}
|
||||||
|
|
||||||
updateMarkerColor(marker, color) {
|
updateMarkerColor(marker, color) {
|
||||||
this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
|
this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
|
||||||
marker.setIcon(iconInfo.icon);
|
marker.setIcon(iconInfo.icon);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
updateMarkerIcon(marker, settings) {
|
updateMarkerIcon(marker, settings) {
|
||||||
this.createMarkerIcon(marker, settings, (iconInfo) => {
|
this.createMarkerIcon(marker, settings, (iconInfo) => {
|
||||||
marker.setIcon(iconInfo.icon);
|
marker.setIcon(iconInfo.icon);
|
||||||
if (settings.showLabel) {
|
if (settings.showLabel) {
|
||||||
marker.unbindTooltip();
|
marker.unbindTooltip();
|
||||||
marker.tooltipOffset = [0, -iconInfo.size[1] + 10];
|
marker.tooltipOffset = [0, -iconInfo.size[1] + 10];
|
||||||
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
|
marker.bindTooltip('<div style="color: ' + settings.labelColor + ';"><b>' + settings.labelText + '</b></div>',
|
||||||
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
|
{className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
createMarkerIcon(marker, settings, onMarkerIconReady) {
|
createMarkerIcon(marker, settings, onMarkerIconReady) {
|
||||||
var currentImage = settings.currentImage;
|
var currentImage = settings.currentImage;
|
||||||
var opMap = this;
|
var opMap = this;
|
||||||
if (currentImage && currentImage.url) {
|
if (currentImage && currentImage.url) {
|
||||||
this.utils.loadImageAspect(currentImage.url).then(
|
this.utils.loadImageAspect(currentImage.url).then(
|
||||||
(aspect) => {
|
(aspect) => {
|
||||||
if (aspect) {
|
if (aspect) {
|
||||||
var width;
|
var width;
|
||||||
var height;
|
var height;
|
||||||
if (aspect > 1) {
|
if (aspect > 1) {
|
||||||
width = currentImage.size;
|
width = currentImage.size;
|
||||||
height = currentImage.size / aspect;
|
height = currentImage.size / aspect;
|
||||||
} else {
|
} else {
|
||||||
width = currentImage.size * aspect;
|
width = currentImage.size * aspect;
|
||||||
height = currentImage.size;
|
height = currentImage.size;
|
||||||
}
|
}
|
||||||
var icon = L.icon({
|
var icon = L.icon({
|
||||||
iconUrl: currentImage.url,
|
iconUrl: currentImage.url,
|
||||||
iconSize: [width, height],
|
iconSize: [width, height],
|
||||||
iconAnchor: [width/2, height],
|
iconAnchor: [width / 2, height],
|
||||||
popupAnchor: [0, -height]
|
popupAnchor: [0, -height]
|
||||||
});
|
});
|
||||||
var iconInfo = {
|
var iconInfo = {
|
||||||
size: [width, height],
|
size: [width, height],
|
||||||
icon: icon
|
icon: icon
|
||||||
};
|
};
|
||||||
onMarkerIconReady(iconInfo);
|
onMarkerIconReady(iconInfo);
|
||||||
} else {
|
} else {
|
||||||
opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
|
opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
|
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
|
createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
|
||||||
var pinColor = color.substr(1);
|
var pinColor = color.substr(1);
|
||||||
var icon = L.icon({
|
var icon = L.icon({
|
||||||
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
|
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
|
||||||
iconSize: [21, 34],
|
iconSize: [21, 34],
|
||||||
iconAnchor: [10, 34],
|
iconAnchor: [10, 34],
|
||||||
popupAnchor: [0, -34],
|
popupAnchor: [0, -34],
|
||||||
shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
|
shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
|
||||||
shadowSize: [40, 37],
|
shadowSize: [40, 37],
|
||||||
shadowAnchor: [12, 35]
|
shadowAnchor: [12, 35]
|
||||||
});
|
});
|
||||||
var iconInfo = {
|
var iconInfo = {
|
||||||
size: [21, 34],
|
size: [21, 34],
|
||||||
icon: icon
|
icon: icon
|
||||||
};
|
};
|
||||||
onMarkerIconReady(iconInfo);
|
onMarkerIconReady(iconInfo);
|
||||||
}
|
}
|
||||||
|
|
||||||
createMarker(location, dsIndex, settings, onClickListener, markerArgs) {
|
createMarker(location, dsIndex, settings, onClickListener, markerArgs) {
|
||||||
var marker = L.marker(location, {});
|
var marker = L.marker(location, {});
|
||||||
var opMap = this;
|
var opMap = this;
|
||||||
this.createMarkerIcon(marker, settings, (iconInfo) => {
|
this.createMarkerIcon(marker, settings, (iconInfo) => {
|
||||||
marker.setIcon(iconInfo.icon);
|
marker.setIcon(iconInfo.icon);
|
||||||
if (settings.showLabel) {
|
if (settings.showLabel) {
|
||||||
marker.tooltipOffset = [0, -iconInfo.size[1] + 10];
|
marker.tooltipOffset = [0, -iconInfo.size[1] + 10];
|
||||||
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
|
marker.bindTooltip('<div style="color: ' + settings.labelColor + ';"><b>' + settings.labelText + '</b></div>',
|
||||||
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
|
{className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset});
|
||||||
}
|
}
|
||||||
marker.addTo(opMap.map);
|
marker.addTo(opMap.map);
|
||||||
});
|
});
|
||||||
|
|
||||||
if (settings.displayTooltip) {
|
if (settings.displayTooltip) {
|
||||||
this.createTooltip(marker, dsIndex, settings, markerArgs);
|
this.createTooltip(marker, dsIndex, settings, markerArgs);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (onClickListener) {
|
if (onClickListener) {
|
||||||
marker.on('click', onClickListener);
|
marker.on('click', onClickListener);
|
||||||
}
|
}
|
||||||
|
|
||||||
return marker;
|
return marker;
|
||||||
}
|
}
|
||||||
|
|
||||||
removeMarker(marker) {
|
removeMarker(marker) {
|
||||||
this.map.removeLayer(marker);
|
this.map.removeLayer(marker);
|
||||||
}
|
}
|
||||||
|
|
||||||
createTooltip(marker, dsIndex, settings, markerArgs) {
|
createTooltip(marker, dsIndex, settings, markerArgs) {
|
||||||
var popup = L.popup();
|
var popup = L.popup();
|
||||||
popup.setContent('');
|
popup.setContent('');
|
||||||
marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false});
|
marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false});
|
||||||
this.tooltips.push( {
|
this.tooltips.push({
|
||||||
markerArgs: markerArgs,
|
markerArgs: markerArgs,
|
||||||
popup: popup,
|
popup: popup,
|
||||||
locationSettings: settings,
|
locationSettings: settings,
|
||||||
dsIndex: dsIndex
|
dsIndex: dsIndex
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
updatePolylineColor(polyline, settings, color) {
|
updatePolylineColor(polyline, settings, color) {
|
||||||
var style = {
|
var style = {
|
||||||
color: color,
|
color: color,
|
||||||
opacity: settings.strokeOpacity,
|
opacity: settings.strokeOpacity,
|
||||||
weight: settings.strokeWeight
|
weight: settings.strokeWeight
|
||||||
};
|
};
|
||||||
polyline.setStyle(style);
|
polyline.setStyle(style);
|
||||||
}
|
}
|
||||||
|
|
||||||
createPolyline(locations, settings) {
|
createPolyline(locations, settings) {
|
||||||
var polyline = L.polyline(locations,
|
var polyline = L.polyline(locations,
|
||||||
{
|
{
|
||||||
color: settings.color,
|
color: settings.color,
|
||||||
opacity: settings.strokeOpacity,
|
opacity: settings.strokeOpacity,
|
||||||
weight: settings.strokeWeight
|
weight: settings.strokeWeight
|
||||||
}
|
}
|
||||||
).addTo(this.map);
|
).addTo(this.map);
|
||||||
return polyline;
|
return polyline;
|
||||||
}
|
}
|
||||||
|
|
||||||
removePolyline(polyline) {
|
removePolyline(polyline) {
|
||||||
this.map.removeLayer(polyline);
|
this.map.removeLayer(polyline);
|
||||||
}
|
}
|
||||||
|
|
||||||
fitBounds(bounds) {
|
createPolygon(latLangs, settings) {
|
||||||
if (bounds.isValid()) {
|
let polygon = L.polygon(latLangs, {
|
||||||
if (this.dontFitMapBounds && this.defaultZoomLevel) {
|
fill: true,
|
||||||
this.map.setZoom(this.defaultZoomLevel, {animate: false});
|
fillColor: settings.polygonColor,
|
||||||
this.map.panTo(bounds.getCenter(), {animate: false});
|
color: settings.polygonStrokeColor,
|
||||||
} else {
|
weight: settings.polygonStrokeWeight,
|
||||||
var tbMap = this;
|
fillOpacity: settings.polygonOpacity,
|
||||||
this.map.once('zoomend', function() {
|
opacity: settings.polygonStrokeOpacity
|
||||||
if (!tbMap.defaultZoomLevel && tbMap.map.getZoom() > tbMap.minZoomLevel) {
|
}).addTo(this.map);
|
||||||
tbMap.map.setZoom(tbMap.minZoomLevel, {animate: false});
|
return polygon;
|
||||||
}
|
}
|
||||||
});
|
|
||||||
this.map.fitBounds(bounds, {padding: [50, 50], animate: false});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
createLatLng(lat, lng) {
|
removePolygon(polygon) {
|
||||||
return L.latLng(lat, lng);
|
this.map.removeLayer(polygon);
|
||||||
}
|
}
|
||||||
|
|
||||||
extendBoundsWithMarker(bounds, marker) {
|
updatePolygonColor(polygon, settings, color) {
|
||||||
bounds.extend(marker.getLatLng());
|
let style = {
|
||||||
}
|
fill: true,
|
||||||
|
fillColor: color,
|
||||||
|
color: color,
|
||||||
|
weight: settings.polygonStrokeWeight,
|
||||||
|
fillOpacity: settings.polygonOpacity,
|
||||||
|
opacity: settings.polygonStrokeOpacity
|
||||||
|
};
|
||||||
|
polygon.setStyle(style);
|
||||||
|
}
|
||||||
|
|
||||||
getMarkerPosition(marker) {
|
getPolygonLatLngs(polygon) {
|
||||||
return marker.getLatLng();
|
return polygon.getLatLngs();
|
||||||
}
|
}
|
||||||
|
|
||||||
setMarkerPosition(marker, latLng) {
|
setPolygonLatLngs(polygon, latLngs) {
|
||||||
marker.setLatLng(latLng);
|
polygon.setLatLngs(latLngs);
|
||||||
}
|
}
|
||||||
|
|
||||||
getPolylineLatLngs(polyline) {
|
fitBounds(bounds) {
|
||||||
return polyline.getLatLngs();
|
if (bounds.isValid()) {
|
||||||
}
|
if (this.dontFitMapBounds && this.defaultZoomLevel) {
|
||||||
|
this.map.setZoom(this.defaultZoomLevel, {animate: false});
|
||||||
|
this.map.panTo(bounds.getCenter(), {animate: false});
|
||||||
|
} else {
|
||||||
|
var tbMap = this;
|
||||||
|
this.map.once('zoomend', function () {
|
||||||
|
if (!tbMap.defaultZoomLevel && tbMap.map.getZoom() > tbMap.minZoomLevel) {
|
||||||
|
tbMap.map.setZoom(tbMap.minZoomLevel, {animate: false});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.map.fitBounds(bounds, {padding: [50, 50], animate: false});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
setPolylineLatLngs(polyline, latLngs) {
|
createLatLng(lat, lng) {
|
||||||
polyline.setLatLngs(latLngs);
|
return L.latLng(lat, lng);
|
||||||
}
|
}
|
||||||
|
|
||||||
createBounds() {
|
extendBoundsWithMarker(bounds, marker) {
|
||||||
return L.latLngBounds();
|
bounds.extend(marker.getLatLng());
|
||||||
}
|
}
|
||||||
|
|
||||||
extendBounds(bounds, polyline) {
|
getMarkerPosition(marker) {
|
||||||
if (polyline && polyline.getLatLngs()) {
|
return marker.getLatLng();
|
||||||
bounds.extend(polyline.getBounds());
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
invalidateSize() {
|
setMarkerPosition(marker, latLng) {
|
||||||
this.map.invalidateSize(true);
|
marker.setLatLng(latLng);
|
||||||
}
|
}
|
||||||
|
|
||||||
getTooltips() {
|
getPolylineLatLngs(polyline) {
|
||||||
return this.tooltips;
|
return polyline.getLatLngs();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setPolylineLatLngs(polyline, latLngs) {
|
||||||
|
polyline.setLatLngs(latLngs);
|
||||||
|
}
|
||||||
|
|
||||||
|
createBounds() {
|
||||||
|
return L.latLngBounds();
|
||||||
|
}
|
||||||
|
|
||||||
|
extendBounds(bounds, polyline) {
|
||||||
|
if (polyline && polyline.getLatLngs()) {
|
||||||
|
bounds.extend(polyline.getBounds());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
invalidateSize() {
|
||||||
|
this.map.invalidateSize(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
getTooltips() {
|
||||||
|
return this.tooltips;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,377 +14,425 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
var tmGlobals = {
|
var tmGlobals = {
|
||||||
loadingTmId: null,
|
loadingTmId: null,
|
||||||
tmApiKeys: {}
|
tmApiKeys: {}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class TbTencentMap {
|
export default class TbTencentMap {
|
||||||
constructor($containerElement,utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, tmApiKey, tmDefaultMapType) {
|
constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, tmApiKey, tmDefaultMapType) {
|
||||||
var tbMap = this;
|
var tbMap = this;
|
||||||
this.utils = utils;
|
this.utils = utils;
|
||||||
this.defaultZoomLevel = defaultZoomLevel;
|
this.defaultZoomLevel = defaultZoomLevel;
|
||||||
this.dontFitMapBounds = dontFitMapBounds;
|
this.dontFitMapBounds = dontFitMapBounds;
|
||||||
this.minZoomLevel = minZoomLevel;
|
this.minZoomLevel = minZoomLevel;
|
||||||
this.tooltips = [];
|
this.tooltips = [];
|
||||||
this.defaultMapType = tmDefaultMapType;
|
this.defaultMapType = tmDefaultMapType;
|
||||||
|
|
||||||
function clearGlobalId() {
|
function clearGlobalId() {
|
||||||
if (tmGlobals.loadingTmId && tmGlobals.loadingTmId === tbMap.mapId) {
|
if (tmGlobals.loadingTmId && tmGlobals.loadingTmId === tbMap.mapId) {
|
||||||
tmGlobals.loadingTmId = null;
|
tmGlobals.loadingTmId = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function displayError(message) {
|
function displayError(message) {
|
||||||
$containerElement.html( // eslint-disable-line angular/angularelement
|
$containerElement.html( // eslint-disable-line angular/angularelement
|
||||||
"<div class='error'>"+ message + "</div>"
|
"<div class='error'>" + message + "</div>"
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function initTencentMap() {
|
function initTencentMap() {
|
||||||
tbMap.map = new qq.maps.Map($containerElement[0], { // eslint-disable-line no-undef
|
tbMap.map = new qq.maps.Map($containerElement[0], { // eslint-disable-line no-undef
|
||||||
scrollwheel: true,
|
scrollwheel: true,
|
||||||
mapTypeId: getTencentMapTypeId(tbMap.defaultMapType),
|
mapTypeId: getTencentMapTypeId(tbMap.defaultMapType),
|
||||||
zoom: tbMap.defaultZoomLevel || 8
|
zoom: tbMap.defaultZoomLevel || 8
|
||||||
});
|
});
|
||||||
|
|
||||||
if (initCallback) {
|
if (initCallback) {
|
||||||
initCallback();
|
initCallback();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* eslint-disable no-undef */
|
/* eslint-disable no-undef */
|
||||||
|
|
||||||
function getTencentMapTypeId(mapType) {
|
function getTencentMapTypeId(mapType) {
|
||||||
var mapTypeId =qq.maps.MapTypeId.ROADMAP;
|
var mapTypeId = qq.maps.MapTypeId.ROADMAP;
|
||||||
if (mapType) {
|
if (mapType) {
|
||||||
if (mapType === 'hybrid') {
|
if (mapType === 'hybrid') {
|
||||||
mapTypeId = qq.maps.MapTypeId.HYBRID;
|
mapTypeId = qq.maps.MapTypeId.HYBRID;
|
||||||
} else if (mapType === 'satellite') {
|
} else if (mapType === 'satellite') {
|
||||||
mapTypeId = qq.maps.MapTypeId.SATELLITE;
|
mapTypeId = qq.maps.MapTypeId.SATELLITE;
|
||||||
} else if (mapType === 'terrain') {
|
} else if (mapType === 'terrain') {
|
||||||
mapTypeId = qq.maps.MapTypeId.ROADMAP;
|
mapTypeId = qq.maps.MapTypeId.ROADMAP;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return mapTypeId;
|
return mapTypeId;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* eslint-enable no-undef */
|
/* eslint-enable no-undef */
|
||||||
|
|
||||||
this.mapId = '' + Math.random().toString(36).substr(2, 9);
|
this.mapId = '' + Math.random().toString(36).substr(2, 9);
|
||||||
this.apiKey = tmApiKey || '84d6d83e0e51e481e50454ccbe8986b';
|
this.apiKey = tmApiKey || '84d6d83e0e51e481e50454ccbe8986b';
|
||||||
|
|
||||||
window.tm_authFailure = function() { // eslint-disable-line no-undef, angular/window-service
|
window.tm_authFailure = function () { // eslint-disable-line no-undef, angular/window-service
|
||||||
if (tmGlobals.loadingTmId && tmGlobals.loadingTmId === tbMap.mapId) {
|
if (tmGlobals.loadingTmId && tmGlobals.loadingTmId === tbMap.mapId) {
|
||||||
tmGlobals.loadingTmId = null;
|
tmGlobals.loadingTmId = null;
|
||||||
tmGlobals.tmApiKeys[tbMap.apiKey].error = 'Unable to authentificate for tencent Map API.</br>Please check your API key.';
|
tmGlobals.tmApiKeys[tbMap.apiKey].error = 'Unable to authentificate for tencent Map API.</br>Please check your API key.';
|
||||||
displayError(tmGlobals.tmApiKeys[tbMap.apiKey].error);
|
displayError(tmGlobals.tmApiKeys[tbMap.apiKey].error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.initMapFunctionName = 'initTencentMap_' + this.mapId;
|
this.initMapFunctionName = 'initTencentMap_' + this.mapId;
|
||||||
|
|
||||||
window[this.initMapFunctionName] = function() { // eslint-disable-line no-undef, angular/window-service
|
window[this.initMapFunctionName] = function () { // eslint-disable-line no-undef, angular/window-service
|
||||||
tmGlobals.tmApiKeys[tbMap.apiKey].loaded = true;
|
tmGlobals.tmApiKeys[tbMap.apiKey].loaded = true;
|
||||||
initTencentMap();
|
initTencentMap();
|
||||||
for (var p = 0; p < tmGlobals.tmApiKeys[tbMap.apiKey].pendingInits.length; p++) {
|
for (var p = 0; p < tmGlobals.tmApiKeys[tbMap.apiKey].pendingInits.length; p++) {
|
||||||
var pendingInit = tmGlobals.tmApiKeys[tbMap.apiKey].pendingInits[p];
|
var pendingInit = tmGlobals.tmApiKeys[tbMap.apiKey].pendingInits[p];
|
||||||
pendingInit();
|
pendingInit();
|
||||||
}
|
}
|
||||||
tmGlobals.tmApiKeys[tbMap.apiKey].pendingInits = [];
|
tmGlobals.tmApiKeys[tbMap.apiKey].pendingInits = [];
|
||||||
};
|
};
|
||||||
if (this.apiKey && this.apiKey.length > 0) {
|
if (this.apiKey && this.apiKey.length > 0) {
|
||||||
if (tmGlobals.tmApiKeys[this.apiKey]) {
|
if (tmGlobals.tmApiKeys[this.apiKey]) {
|
||||||
if (tmGlobals.tmApiKeys[this.apiKey].error) {
|
if (tmGlobals.tmApiKeys[this.apiKey].error) {
|
||||||
displayError(tmGlobals.tmApiKeys[this.apiKey].error);
|
displayError(tmGlobals.tmApiKeys[this.apiKey].error);
|
||||||
} else if (tmGlobals.tmApiKeys[this.apiKey].loaded) {
|
} else if (tmGlobals.tmApiKeys[this.apiKey].loaded) {
|
||||||
initTencentMap();
|
initTencentMap();
|
||||||
} else {
|
} else {
|
||||||
tmGlobals.tmApiKeys[this.apiKey].pendingInits.push(initTencentMap);
|
tmGlobals.tmApiKeys[this.apiKey].pendingInits.push(initTencentMap);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
tmGlobals.tmApiKeys[this.apiKey] = {
|
tmGlobals.tmApiKeys[this.apiKey] = {
|
||||||
loaded: false,
|
loaded: false,
|
||||||
pendingInits: []
|
pendingInits: []
|
||||||
};
|
};
|
||||||
var tencentMapScriptRes = 'https://map.qq.com/api/js?v=2.exp&key='+this.apiKey+'&callback='+this.initMapFunctionName;
|
var tencentMapScriptRes = 'https://map.qq.com/api/js?v=2.exp&key=' + this.apiKey + '&callback=' + this.initMapFunctionName;
|
||||||
|
|
||||||
tmGlobals.loadingTmId = this.mapId;
|
tmGlobals.loadingTmId = this.mapId;
|
||||||
lazyLoad.load({ type: 'js', path: tencentMapScriptRes }).then( // eslint-disable-line no-undef
|
lazyLoad.load({type: 'js', path: tencentMapScriptRes}).then( // eslint-disable-line no-undef
|
||||||
function success() {
|
function success() {
|
||||||
setTimeout(clearGlobalId, 2000); // eslint-disable-line no-undef, angular/timeout-service
|
setTimeout(clearGlobalId, 2000); // eslint-disable-line no-undef, angular/timeout-service
|
||||||
},
|
},
|
||||||
function fail(e) {
|
function fail(e) {
|
||||||
clearGlobalId();
|
clearGlobalId();
|
||||||
tmGlobals.tmApiKeys[tbMap.apiKey].error = 'tencent map api load failed!</br>'+e;
|
tmGlobals.tmApiKeys[tbMap.apiKey].error = 'tencent map api load failed!</br>' + e;
|
||||||
displayError(tmGlobals.tmApiKeys[tbMap.apiKey].error);
|
displayError(tmGlobals.tmApiKeys[tbMap.apiKey].error);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
displayError('No tencent Map Api Key provided!');
|
displayError('No tencent Map Api Key provided!');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
inited() {
|
inited() {
|
||||||
return angular.isDefined(this.map);
|
return angular.isDefined(this.map);
|
||||||
}
|
}
|
||||||
|
|
||||||
createMarkerLabelStyle(settings) {
|
createMarkerLabelStyle(settings) {
|
||||||
return {
|
return {
|
||||||
width: "200px",
|
width: "200px",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
color: settings.labelColor,
|
color: settings.labelColor,
|
||||||
background: "none",
|
background: "none",
|
||||||
border: "none",
|
border: "none",
|
||||||
fontSize: "12px",
|
fontSize: "12px",
|
||||||
fontFamily: "\"Helvetica Neue\", Arial, Helvetica, sans-serif",
|
fontFamily: "\"Helvetica Neue\", Arial, Helvetica, sans-serif",
|
||||||
fontWeight: "bold"
|
fontWeight: "bold"
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/* eslint-disable no-undef,no-unused-vars*/
|
/* eslint-disable no-undef,no-unused-vars*/
|
||||||
updateMarkerLabel(marker, settings) {
|
updateMarkerLabel(marker, settings) {
|
||||||
if (marker.label) {
|
if (marker.label) {
|
||||||
marker.label.setContent(settings.labelText);
|
marker.label.setContent(settings.labelText);
|
||||||
marker.label.setStyle(this.createMarkerLabelStyle(settings));
|
marker.label.setStyle(this.createMarkerLabelStyle(settings));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* eslint-enable no-undef,no-unused-vars */
|
|
||||||
|
|
||||||
/* eslint-disable no-undef,no-unused-vars */
|
/* eslint-enable no-undef,no-unused-vars */
|
||||||
updateMarkerColor(marker, color) {
|
|
||||||
this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
|
|
||||||
marker.setIcon(iconInfo.icon);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
/* eslint-enable no-undef,,no-unused-vars */
|
|
||||||
|
|
||||||
/* eslint-disable no-undef */
|
/* eslint-disable no-undef,no-unused-vars */
|
||||||
updateMarkerIcon(marker, settings) {
|
updateMarkerColor(marker, color) {
|
||||||
this.createMarkerIcon(marker, settings, (iconInfo) => {
|
this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
|
||||||
marker.setIcon(iconInfo.icon);
|
marker.setIcon(iconInfo.icon);
|
||||||
if (marker.label) {
|
});
|
||||||
marker.label.setOffset(new qq.maps.Size(-100, -iconInfo.size[1]-20));
|
}
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
/* eslint-disable no-undef */
|
|
||||||
|
|
||||||
/* eslint-disable no-undef */
|
/* eslint-enable no-undef,,no-unused-vars */
|
||||||
createMarkerIcon(marker, settings, onMarkerIconReady) {
|
|
||||||
var currentImage = settings.currentImage;
|
|
||||||
var tMap = this;
|
|
||||||
if (currentImage && currentImage.url) {
|
|
||||||
this.utils.loadImageAspect(currentImage.url).then(
|
|
||||||
(aspect) => {
|
|
||||||
if (aspect) {
|
|
||||||
var width;
|
|
||||||
var height;
|
|
||||||
if (aspect > 1) {
|
|
||||||
width = currentImage.size;
|
|
||||||
height = currentImage.size / aspect;
|
|
||||||
} else {
|
|
||||||
width = currentImage.size * aspect;
|
|
||||||
height = currentImage.size;
|
|
||||||
}
|
|
||||||
var icon = new qq.maps.MarkerImage(currentImage.url,
|
|
||||||
new qq.maps.Size(width, height),
|
|
||||||
new qq.maps.Point(0,0),
|
|
||||||
new qq.maps.Point(width/2, height),
|
|
||||||
new qq.maps.Size(width, height));
|
|
||||||
var iconInfo = {
|
|
||||||
size: [width, height],
|
|
||||||
icon: icon
|
|
||||||
};
|
|
||||||
onMarkerIconReady(iconInfo);
|
|
||||||
} else {
|
|
||||||
tMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* eslint-enable no-undef */
|
|
||||||
|
|
||||||
/* eslint-disable no-undef */
|
/* eslint-disable no-undef */
|
||||||
createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
|
updateMarkerIcon(marker, settings) {
|
||||||
var pinColor = color.substr(1);
|
this.createMarkerIcon(marker, settings, (iconInfo) => {
|
||||||
var icon = new qq.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=%E2%80%A2|" + pinColor,
|
marker.setIcon(iconInfo.icon);
|
||||||
new qq.maps.Size(40, 37),
|
if (marker.label) {
|
||||||
new qq.maps.Point(0,0),
|
marker.label.setOffset(new qq.maps.Size(-100, -iconInfo.size[1] - 20));
|
||||||
new qq.maps.Point(10, 37));
|
}
|
||||||
var iconInfo = {
|
});
|
||||||
size: [40, 37],
|
}
|
||||||
icon: icon
|
|
||||||
};
|
|
||||||
onMarkerIconReady(iconInfo);
|
|
||||||
}
|
|
||||||
/* eslint-enable no-undef */
|
|
||||||
|
|
||||||
/* eslint-disable no-undef */
|
/* eslint-disable no-undef */
|
||||||
createMarker(location, dsIndex, settings, onClickListener, markerArgs) {
|
|
||||||
var marker = new qq.maps.Marker({
|
|
||||||
position: location
|
|
||||||
});
|
|
||||||
var tMap = this;
|
|
||||||
this.createMarkerIcon(marker, settings, (iconInfo) => {
|
|
||||||
marker.setIcon(iconInfo.icon);
|
|
||||||
marker.setMap(tMap.map);
|
|
||||||
if (settings.showLabel) {
|
|
||||||
marker.label = new qq.maps.Label({
|
|
||||||
clickable: false,
|
|
||||||
content: settings.labelText,
|
|
||||||
offset: new qq.maps.Size(-100, -iconInfo.size[1]-20),
|
|
||||||
style: tMap.createMarkerLabelStyle(settings),
|
|
||||||
visible: true,
|
|
||||||
position: location,
|
|
||||||
map: tMap.map,
|
|
||||||
zIndex: 1000
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (settings.displayTooltip) {
|
/* eslint-disable no-undef */
|
||||||
this.createTooltip(marker, dsIndex, settings, markerArgs);
|
createMarkerIcon(marker, settings, onMarkerIconReady) {
|
||||||
}
|
var currentImage = settings.currentImage;
|
||||||
|
var tMap = this;
|
||||||
|
if (currentImage && currentImage.url) {
|
||||||
|
this.utils.loadImageAspect(currentImage.url).then(
|
||||||
|
(aspect) => {
|
||||||
|
if (aspect) {
|
||||||
|
var width;
|
||||||
|
var height;
|
||||||
|
if (aspect > 1) {
|
||||||
|
width = currentImage.size;
|
||||||
|
height = currentImage.size / aspect;
|
||||||
|
} else {
|
||||||
|
width = currentImage.size * aspect;
|
||||||
|
height = currentImage.size;
|
||||||
|
}
|
||||||
|
var icon = new qq.maps.MarkerImage(currentImage.url,
|
||||||
|
new qq.maps.Size(width, height),
|
||||||
|
new qq.maps.Point(0, 0),
|
||||||
|
new qq.maps.Point(width / 2, height),
|
||||||
|
new qq.maps.Size(width, height));
|
||||||
|
var iconInfo = {
|
||||||
|
size: [width, height],
|
||||||
|
icon: icon
|
||||||
|
};
|
||||||
|
onMarkerIconReady(iconInfo);
|
||||||
|
} else {
|
||||||
|
tMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (onClickListener) {
|
/* eslint-enable no-undef */
|
||||||
qq.maps.event.addListener(marker, 'click', onClickListener);
|
|
||||||
}
|
|
||||||
|
|
||||||
return marker;
|
/* eslint-disable no-undef */
|
||||||
}
|
createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
|
||||||
|
var pinColor = color.substr(1);
|
||||||
|
var icon = new qq.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=%E2%80%A2|" + pinColor,
|
||||||
|
new qq.maps.Size(40, 37),
|
||||||
|
new qq.maps.Point(0, 0),
|
||||||
|
new qq.maps.Point(10, 37));
|
||||||
|
var iconInfo = {
|
||||||
|
size: [40, 37],
|
||||||
|
icon: icon
|
||||||
|
};
|
||||||
|
onMarkerIconReady(iconInfo);
|
||||||
|
}
|
||||||
|
|
||||||
/* eslint-disable no-undef */
|
/* eslint-enable no-undef */
|
||||||
removeMarker(marker) {
|
|
||||||
marker.setMap(null);
|
|
||||||
if (marker.label) {
|
|
||||||
marker.label.setMap(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* eslint-enable no-undef */
|
/* eslint-disable no-undef */
|
||||||
|
createMarker(location, dsIndex, settings, onClickListener, markerArgs) {
|
||||||
|
var marker = new qq.maps.Marker({
|
||||||
|
position: location
|
||||||
|
});
|
||||||
|
var tMap = this;
|
||||||
|
this.createMarkerIcon(marker, settings, (iconInfo) => {
|
||||||
|
marker.setIcon(iconInfo.icon);
|
||||||
|
marker.setMap(tMap.map);
|
||||||
|
if (settings.showLabel) {
|
||||||
|
marker.label = new qq.maps.Label({
|
||||||
|
clickable: false,
|
||||||
|
content: settings.labelText,
|
||||||
|
offset: new qq.maps.Size(-100, -iconInfo.size[1] - 20),
|
||||||
|
style: tMap.createMarkerLabelStyle(settings),
|
||||||
|
visible: true,
|
||||||
|
position: location,
|
||||||
|
map: tMap.map,
|
||||||
|
zIndex: 1000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
/* eslint-disable no-undef */
|
if (settings.displayTooltip) {
|
||||||
createTooltip(marker, dsIndex, settings, markerArgs) {
|
this.createTooltip(marker, dsIndex, settings, markerArgs);
|
||||||
var popup = new qq.maps.InfoWindow({
|
}
|
||||||
map :this.map
|
|
||||||
});
|
|
||||||
var map = this;
|
|
||||||
qq.maps.event.addListener(marker, 'click', function() {
|
|
||||||
if (settings.autocloseTooltip) {
|
|
||||||
map.tooltips.forEach((tooltip) => {
|
|
||||||
tooltip.popup.close();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
popup.open();
|
|
||||||
popup.setPosition(marker);
|
|
||||||
});
|
|
||||||
this.tooltips.push( {
|
|
||||||
markerArgs: markerArgs,
|
|
||||||
popup: popup,
|
|
||||||
locationSettings: settings,
|
|
||||||
dsIndex: dsIndex
|
|
||||||
});
|
|
||||||
}
|
|
||||||
/* eslint-enable no-undef */
|
|
||||||
|
|
||||||
/* eslint-disable no-undef */
|
if (onClickListener) {
|
||||||
updatePolylineColor(polyline, settings, color) {
|
qq.maps.event.addListener(marker, 'click', onClickListener);
|
||||||
var options = {
|
}
|
||||||
path: polyline.getPath(),
|
|
||||||
strokeColor: color,
|
|
||||||
strokeOpacity: settings.strokeOpacity,
|
|
||||||
strokeWeight: settings.strokeWeight,
|
|
||||||
map: this.map
|
|
||||||
};
|
|
||||||
polyline.setOptions(options);
|
|
||||||
}
|
|
||||||
/* eslint-enable no-undef */
|
|
||||||
|
|
||||||
/* eslint-disable no-undef */
|
return marker;
|
||||||
createPolyline(locations, settings) {
|
}
|
||||||
var polyline = new qq.maps.Polyline({
|
|
||||||
path: locations,
|
|
||||||
strokeColor: settings.color,
|
|
||||||
strokeOpacity: settings.strokeOpacity,
|
|
||||||
strokeWeight: settings.strokeWeight,
|
|
||||||
map: this.map
|
|
||||||
});
|
|
||||||
|
|
||||||
return polyline;
|
/* eslint-disable no-undef */
|
||||||
}
|
removeMarker(marker) {
|
||||||
/* eslint-enable no-undef */
|
marker.setMap(null);
|
||||||
|
if (marker.label) {
|
||||||
|
marker.label.setMap(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
removePolyline(polyline) {
|
/* eslint-enable no-undef */
|
||||||
polyline.setMap(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* eslint-disable no-undef ,no-unused-vars*/
|
/* eslint-disable no-undef */
|
||||||
fitBounds(bounds) {
|
createTooltip(marker, dsIndex, settings, markerArgs) {
|
||||||
if (this.dontFitMapBounds && this.defaultZoomLevel) {
|
var popup = new qq.maps.InfoWindow({
|
||||||
this.map.setZoom(this.defaultZoomLevel);
|
map: this.map
|
||||||
this.map.setCenter(bounds.getCenter());
|
});
|
||||||
} else {
|
var map = this;
|
||||||
var tbMap = this;
|
qq.maps.event.addListener(marker, 'click', function () {
|
||||||
qq.maps.event.addListenerOnce(this.map, 'bounds_changed', function() { // eslint-disable-line no-undef
|
if (settings.autocloseTooltip) {
|
||||||
if (!tbMap.defaultZoomLevel && tbMap.map.getZoom() > tbMap.minZoomLevel) {
|
map.tooltips.forEach((tooltip) => {
|
||||||
tbMap.map.setZoom(tbMap.minZoomLevel);
|
tooltip.popup.close();
|
||||||
}
|
});
|
||||||
});
|
}
|
||||||
this.map.fitBounds(bounds);
|
popup.open();
|
||||||
}
|
popup.setPosition(marker);
|
||||||
}
|
});
|
||||||
/* eslint-enable no-undef,no-unused-vars */
|
this.tooltips.push({
|
||||||
|
markerArgs: markerArgs,
|
||||||
|
popup: popup,
|
||||||
|
locationSettings: settings,
|
||||||
|
dsIndex: dsIndex
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
createLatLng(lat, lng) {
|
/* eslint-enable no-undef */
|
||||||
return new qq.maps.LatLng(lat, lng); // eslint-disable-line no-undef
|
|
||||||
}
|
|
||||||
|
|
||||||
extendBoundsWithMarker(bounds, marker) {
|
/* eslint-disable no-undef */
|
||||||
bounds.extend(marker.getPosition());
|
updatePolylineColor(polyline, settings, color) {
|
||||||
}
|
var options = {
|
||||||
|
path: polyline.getPath(),
|
||||||
|
strokeColor: color,
|
||||||
|
strokeOpacity: settings.strokeOpacity,
|
||||||
|
strokeWeight: settings.strokeWeight,
|
||||||
|
map: this.map
|
||||||
|
};
|
||||||
|
polyline.setOptions(options);
|
||||||
|
}
|
||||||
|
|
||||||
getMarkerPosition(marker) {
|
/* eslint-enable no-undef */
|
||||||
return marker.getPosition();
|
|
||||||
}
|
|
||||||
|
|
||||||
setMarkerPosition(marker, latLng) {
|
/* eslint-disable no-undef */
|
||||||
marker.setPosition(latLng);
|
createPolyline(locations, settings) {
|
||||||
if (marker.label) {
|
var polyline = new qq.maps.Polyline({
|
||||||
marker.label.setPosition(latLng);
|
path: locations,
|
||||||
}
|
strokeColor: settings.color,
|
||||||
}
|
strokeOpacity: settings.strokeOpacity,
|
||||||
|
strokeWeight: settings.strokeWeight,
|
||||||
|
map: this.map
|
||||||
|
});
|
||||||
|
|
||||||
getPolylineLatLngs(polyline) {
|
return polyline;
|
||||||
return polyline.getPath().getArray();
|
}
|
||||||
}
|
|
||||||
|
|
||||||
setPolylineLatLngs(polyline, latLngs) {
|
/* eslint-enable no-undef */
|
||||||
polyline.setPath(latLngs);
|
|
||||||
}
|
|
||||||
|
|
||||||
createBounds() {
|
removePolyline(polyline) {
|
||||||
return new qq.maps.LatLngBounds(); // eslint-disable-line no-undef
|
polyline.setMap(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
extendBounds(bounds, polyline) {
|
/* eslint-disable no-undef */
|
||||||
if (polyline && polyline.getPath()) {
|
createPolygon(latLangs, settings) {
|
||||||
var locations = polyline.getPath();
|
let polygon = new qq.maps.Polygon({
|
||||||
for (var i = 0; i < locations.getLength(); i++) {
|
map: this.map,
|
||||||
bounds.extend(locations.getAt(i));
|
path: latLangs,
|
||||||
}
|
strokeColor: settings.polygonStrokeColor,
|
||||||
}
|
fillColor: settings.polygonColor,
|
||||||
}
|
strokeWeight: settings.polygonStrokeWeight
|
||||||
|
});
|
||||||
|
return polygon;
|
||||||
|
}
|
||||||
|
/* eslint-disable no-undef */
|
||||||
|
|
||||||
invalidateSize() {
|
removePolygon (polygon) {
|
||||||
qq.maps.event.trigger(this.map, "resize"); // eslint-disable-line no-undef
|
polygon.setMap(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
getTooltips() {
|
/* eslint-disable no-undef,no-unused-vars */
|
||||||
return this.tooltips;
|
updatePolygonColor (polygon, settings, color) {
|
||||||
}
|
let options = {
|
||||||
|
path: polygon.getPath(),
|
||||||
|
map: this.map,
|
||||||
|
strokeColor: color,
|
||||||
|
fillColor: color,
|
||||||
|
strokeWeight: settings.polygonStrokeWeight
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
/* eslint-disable no-undef ,no-unused-vars*/
|
||||||
|
|
||||||
|
|
||||||
|
getPolygonLatLngs(polygon) {
|
||||||
|
return polygon.getPath().getArray();
|
||||||
|
}
|
||||||
|
|
||||||
|
setPolygonLatLngs(polygon, latLngs) {
|
||||||
|
polygon.setPath(latLngs);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* eslint-disable no-undef ,no-unused-vars*/
|
||||||
|
fitBounds(bounds) {
|
||||||
|
if (this.dontFitMapBounds && this.defaultZoomLevel) {
|
||||||
|
this.map.setZoom(this.defaultZoomLevel);
|
||||||
|
this.map.setCenter(bounds.getCenter());
|
||||||
|
} else {
|
||||||
|
var tbMap = this;
|
||||||
|
qq.maps.event.addListenerOnce(this.map, 'bounds_changed', function () { // eslint-disable-line no-undef
|
||||||
|
if (!tbMap.defaultZoomLevel && tbMap.map.getZoom() > tbMap.minZoomLevel) {
|
||||||
|
tbMap.map.setZoom(tbMap.minZoomLevel);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.map.fitBounds(bounds);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* eslint-enable no-undef,no-unused-vars */
|
||||||
|
|
||||||
|
createLatLng(lat, lng) {
|
||||||
|
return new qq.maps.LatLng(lat, lng); // eslint-disable-line no-undef
|
||||||
|
}
|
||||||
|
|
||||||
|
extendBoundsWithMarker(bounds, marker) {
|
||||||
|
bounds.extend(marker.getPosition());
|
||||||
|
}
|
||||||
|
|
||||||
|
getMarkerPosition(marker) {
|
||||||
|
return marker.getPosition();
|
||||||
|
}
|
||||||
|
|
||||||
|
setMarkerPosition(marker, latLng) {
|
||||||
|
marker.setPosition(latLng);
|
||||||
|
if (marker.label) {
|
||||||
|
marker.label.setPosition(latLng);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getPolylineLatLngs(polyline) {
|
||||||
|
return polyline.getPath().getArray();
|
||||||
|
}
|
||||||
|
|
||||||
|
setPolylineLatLngs(polyline, latLngs) {
|
||||||
|
polyline.setPath(latLngs);
|
||||||
|
}
|
||||||
|
|
||||||
|
createBounds() {
|
||||||
|
return new qq.maps.LatLngBounds(); // eslint-disable-line no-undef
|
||||||
|
}
|
||||||
|
|
||||||
|
extendBounds(bounds, polyline) {
|
||||||
|
if (polyline && polyline.getPath()) {
|
||||||
|
var locations = polyline.getPath();
|
||||||
|
for (var i = 0; i < locations.getLength(); i++) {
|
||||||
|
bounds.extend(locations.getAt(i));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
invalidateSize() {
|
||||||
|
qq.maps.event.trigger(this.map, "resize"); // eslint-disable-line no-undef
|
||||||
|
}
|
||||||
|
|
||||||
|
getTooltips() {
|
||||||
|
return this.tooltips;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user