Question

所以我正在尝试构建一个简单的应用程序，显示距离用户当前位置的Google地图上的位置距离。

我正在使用val works: Array[Option[Int]] = Array(1) .map { t => Some(t)} val fails: Array[Array[Option[Int]]] = Array(Array(1)) .map { ts => ts.map { Some(_)} } // error: type mismatch; found : Array[Array[Some[Int]]] required: Array[Array[Option[Int]]] val worksButUgly: Array[Array[Option[Int]]] = Array(Array(1)) .map { ts => ts.map { case t => (Some(t).asInstanceOf[Option[Int]])}}和CATransaction.begin() CATransaction.setCompletionBlock { //Actions to be done after animation } //Animation Code CATransaction.commit()插件。

我正在尝试将Google地图置于用户所在位置的中心，但如果我在我的应用程序中对经度和纬度数据进行硬编码，则只能加载地图：

Vue.js 1.0

我的地图在这里呈现：

vue-google-maps

然后在ready函数中，我通过html5获取用户的地理位置，并将用户的标记推送到地图上。

所以我现在要做的是动态居中位置。

我将地图html包含在条件语句中，如此

 export default {

        data: function data() {

            return {
                center:{ lat:28.2328382, lng: -3.298973987232 },
                mapBounds: {},
                usermarkers:  [],
                businessmarkers: [],
                zoomControl: true,
                mapTypeControl: true,
                data: {
                    currentLocation: '',
                    search: {
                        lon: '',
                        lat: '',
                        unit: '',
                        order: 'asc',
                        distance: '',
                        type: ''
                    }
                },
            };
        },

在我的数据功能中，我将中心留空

    <map :center.sync="center" :zoom.sync="zoom" :map-type-id.sync="mapType" :options="{styles: mapStyles}">
                <marker v-for="m in usermarkers" :position.sync="m.position">
                    <info-window :position="center" :content="ifw2text"></info-window>
                </marker>
                <marker v-for="m in businessmarkers" :position.sync="m.position">
                    <info-window :position="center" :content="m.ifw2text"></info-window>
                </marker>
            </map>

然后我的ready函数抓取geolocation构建中心对象并正确设置this.center

      <div v-if="!data.center.lat && !data.center.lng">
            <map :center.sync="center" :zoom.sync="zoom" :map-type-id.sync="mapType" :options="{styles: mapStyles}">
                <marker v-for="m in usermarkers" :position.sync="m.position">
                    <info-window :position="center" :content="ifw2text"></info-window>
                </marker>
                <marker v-for="m in businessmarkers" :position.sync="m.position">
                    <info-window :position="center" :content="m.ifw2text"></info-window>
                </marker>
            </map>
        </div>

我的console.log显示设置了center.lat和center.lng，但地图仍未呈现。当设置这样的数据时，不应该重新加载虚拟DOM，从而渲染地图吗？我错过了一些非常简单的事情，或者说这是完全错误的方式吗？

VueJs仅在设置位置时显示谷歌地图

0 个答案: