小编ghy*_*ybs的帖子

如何在使用vue-router时更改页面标题？

如果可能的话,我想在路线定义中指定我的标题.通常在<head><title>浏览器标题栏中指定和显示的内容.

我的项目设置如下:

main.js

import Vue from 'vue'
import App from './App.vue'
import VeeValidate from 'vee-validate';
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(VeeValidate);
Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

Run Code Online (Sandbox Code Playgroud)

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Skills from './components/Skills.vue'
import About from './components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'skills',
      component: Skills,
      meta: { title: 'Skills - MyApp' } // <- …

Run Code Online (Sandbox Code Playgroud)

vue.js vue-router vuejs2

dar*_*rse

2018 08-02

13
推荐指数

6
解决办法

7454
查看次数

数据切换选项卡不下载传单地图

我正在使用选项卡显示清晰的内容,但其中一个已停止下载,因为它位于数据切换选项卡中.这是一张传单地图.这是代码:

导航条代码:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Données principales</a></li>
    <li><a data-toggle="tab" href="#carte">Carte</a></li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">Lorem ipsum</div>
    <div id="carte" class="tab-pane fade"> **//see script below\\** </div>
</div>

Run Code Online (Sandbox Code Playgroud)

脚本:

<div id="carteBenef"></div>
      <script type="text/javascript">
          $(document).ready(function () {
              var map = new L.Map('carteBenef');
              var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
                     subDomains = ['otile1', 'otile2', 'otile3', 'otile4'],
                     cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';
              var cloudmade = new L.TileLayer(cloudmadeUrl, …

Run Code Online (Sandbox Code Playgroud)

javascript tabs toggle twitter-bootstrap leaflet

Ned*_*Ned

2016 03-28

12
推荐指数

2
解决办法

5533
查看次数

在Leaflet LayerGroup中查找特定图层,其中图层是多边形

我正在尝试定义一堆像这样的Leaflet多边形:

var poly = new L.Polygon([
  [10.1840229, 36.8906981],
  [10.1840393, 36.8906669],
  [10.1840989, 36.8906868],
  [10.1840826, 36.890718],
  [10.1840229, 36.8906981]
], {
  'id': 'someId'
});

Run Code Online (Sandbox Code Playgroud)

然后我将这些多边形分组到GroupLayer中,如下所示:

var group = new L.LayerGroup([poly1, poly2, ..., polyn]);
group.addTo(map);

Run Code Online (Sandbox Code Playgroud)

我可以使用group.getLayer()通过Id找到这些多边形吗？或者我是否需要以不同方式定义图层/多边形才能执行此操作？

javascript leaflet

AAJ*_*AAJ

2015 12-17

10
推荐指数

1
解决办法

1万
查看次数

未捕获的类型错误：this._map 为 null（Vue.js 3，Leaflet）

我在 Vue.js 项目（版本 3）中从 Leaflet 收到一个奇怪的错误。

如果我关闭弹出窗口并放大/缩小，Firefox 上会出现此错误：

未捕获的类型错误：this._map 为 null

在 Chrome 上：

无法读取 null 的属性“_latLngToNewLayerPoint”

地图组件如下：

<template>
  <div id="map"></div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import L from 'leaflet';

export default {
  name: 'Map',
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.map = L.map("map").setView([51.959, -8.623], 12);
    L.tileLayer("https://{s}.tile.osm.org/{z}/{x}/{y}.png", {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);

    L.circleMarker([51.959, -8.623]).addTo(this.map)
      .bindPopup('I am a marker')
      .openPopup();
  }
}
</script>

<style scoped>
  #map {
    height: 300px;
    width: 100%;
  }
</style>

Run Code Online (Sandbox Code Playgroud)

如何重现错误：

打开 stackblitz： …

leaflet vue.js vuejs3

tre*_*con

2021 03-18

8
推荐指数

1
解决办法

3082
查看次数

Vuejs 传单：未找到地图容器

我正在尝试在 Vue 中使用传单地图，但不断收到错误消息：

未捕获的错误：未找到地图容器。

这是我的组件的样子：

<template>
  <div id="app" class="container">
    Map
    <div class="col-md-9">
      <div id="mapid"></div>
    </div>
  </div>
</template>

<style scoped>
#mapid { 
    height: 800px;
}
</style>

<script>
import L from 'leaflet'

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: ''
}).addTo(mymap);
</script>

Run Code Online (Sandbox Code Playgroud)

我还在index.html脑海中添加了 Leaflet CSS 和 JavaScript 。

javascript leaflet vue.js

Kev*_*vin

2018 08-28

7
推荐指数

1
解决办法

5625
查看次数

即使在“type”in`检查之后，属性“type”在类型“object”上不存在

此代码无法编译：

const nodeIsUseless = (node: unknown) =>
  node !== null &&
  typeof node === "object" &&
  "type" in node &&
  typeof node.type === "string" &&
  node.type === "JSXText";

Run Code Online (Sandbox Code Playgroud)

因为在最后两行：

类型“对象”上不存在属性“类型”。(2339)

...我自己可以理解，但我不明白为什么"type" in node检查后， TS 推断node仍然是 typeobject而不是 type { type: unknown; [key: string]: unknown }，这不会触发 error。

typescript typeguards

Nin*_*liu

2022 08-15

7
推荐指数

1
解决办法

7364
查看次数

使用 markercluster 对多个层进行聚类

我目前正在使用Leaflet库进行地图可视化。我还使用markercluster插件来聚类我的点。

所以我现在的问题如下：

我在 3 个不同的层中有 3 个不同类别的标记。例如餐厅、咖啡馆和酒吧层。我想将所有活动层组合到一个特定的集群。

目前，条目是分开聚集的，但我想将它们聚集在一起。

下一步是根据 childMarkers 为集群着色。例如，集群包括餐厅和酒吧标记 => 半红/半绿，仅餐厅 => 仅红色等。

我希望有人可以帮助我找到解决方案。谢谢！

javascript leaflet leaflet.markercluster

wid*_*ddy

2018 07-27

6
推荐指数

1
解决办法

2477
查看次数

使用标记图标只有很棒的字体,没有周围的气球

我有这个代码工作正常,但我需要只显示图标,而不是带有阴影的"气球".

我尝试删除" markerColor...",但这只是更改为默认的蓝色标记/气球.

如何只显示图标及其大小和颜色？

pointToLayer: function(feature, latlng) {
  var con = feature.properties.concept;

  var hub;

  // icons for XX, YY and ZZ 
  if (kon === 'XX') {
    hub = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'truck', prefix: 'fa', markerColor: 'cadetblue'}) });
  } else if (kon === 'YY') {
    hub = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'envelope', prefix: 'fa', markerColor: 'blue'}) });
  } else if (kon === 'ZZ') {
    hub = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'bicycle', prefix: 'fa', markerColor: 'darkblue'}) });
  } else { …

Run Code Online (Sandbox Code Playgroud)

markers leaflet font-awesome

QGI*_*ser

2018 03-05

6
推荐指数

1
解决办法

4367
查看次数

Leaflet-React 地图渲染图块未到位和空图块

我正在尝试将一个简单的 Leaflet-React 地图渲染到屏幕上。

但是瓷砖都弄乱了，或者没有渲染。看一下截图：

我尝试使用默认的 OpenStreetMaps URL 以及 MapBox URL，但都给出了相同的结果，所以我认为这不是磁贴服务器问题。虽然我可能是错的。

这是我的代码：

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import {Map, TileLayer, Marker, Popup} from 'react-leaflet'

class FieldMap extends Component {
    state = {
        lat: 51.505,
        lng: -0.09,
        zoom: 1,
        zoomOffset: 1
    }

    render() {
        const position = [this.state.lat, this.state.lng]
        return (
            <div style={{
                paddingBottom: "5%",
                height: "200px",
                width: "200px"
            }}>
                <Map style={{
                paddingBottom: "5%",
                height: "200px",
                width: "200px"}} center={position} zoom={this.state.zoom} zoomOffset={this.zoomOffset}>
                    <TileLayer
                        attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                        url="https://api.mapbox.com/styles/v1/rustyraptor/cjkbednp4buod2rnwog2xrdtb/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicnVzdHlyYXB0b3IiLCJhIjoiY2prOXdtZ2E5MjN3ODNxbWVsM3NyNWlsZCJ9.AVHo6o9Z68w1c2lsBXuGDg"/>
                    <Marker …

Run Code Online (Sandbox Code Playgroud)

leaflet react-leaflet

Rus*_*tor

2018 08-02

6
推荐指数

1
解决办法

3280
查看次数

传单标记群集图标未显示

我有一个问题，标记集群工作并显示集群中的项目数，但是图标不显示。当我放大时，会显示单个图标，但从远处看，群集图标不会显示。这是我在集群中设置数据的代码：

    // Marker cluster
    var producerLayer = new L.MarkerClusterGroup();
    // Loop through the lp array
    for (var i=0; i < lp.length; i++) {
        var name = lp[i][0];
        var place = lp[i][1];
        var lat = lp[i][2];
        var lng = lp[i][3];
        var liscence = lp[i][4];
        var risk = lp[i][5];

        var icon = greenIcon;

        var markerLocation = new L.LatLng(lat, lng);
        var marker = new L.Marker(markerLocation,  {icon});


        var content = '<div class="info_content">' +
                '<h3>' + name + '</h3>' +
                '<p>' + place + '</p>' …

Run Code Online (Sandbox Code Playgroud)

leaflet leaflet.markercluster

ano*_*ous

2018 04-17

5
推荐指数

1
解决办法

1101
查看次数