首页 > 解决方案 > 如何在vue js中修复谷歌地图中心位置

问题描述

嗨,创建房地产应用程序,如果我从 Json 调用位置,我在谷歌地图中遇到问题,我会收到错误,就像我的 html 代码一样

name: "Property",
  data() {
    return {
      ref: this.$route.params.ref,
      propertydata: {},
      center: { lat: 45.508, lng: -73.587 },
      markers: [],
      places: [],
      currentPlace: null
    };
  },

  created() {
    this.$http
      .get("http://localhost:3000/Listing/" + this.ref)
      .then(function(data) {
        console.log(data);

        this.propertydata = data.body;
        this.center=data.body.latitude;
        this.center=data.body.longitude;
        th
      });
 <gmap-map :center="{lat: {{propertydata.latitude}} , lng: {{propertydata.longitude}} } " :zoom="14" style="width:500px;  height:500px;"></gmap-map>

- invalid expression: Unexpected token { in

{lat: {{propertydata.latitude}} , lng: {{propertydata.longitude}} }

原始表达式: :center="{lat: {{propertydata.latitude}} , lng: {{propertydata.longitude}} } "

我的位置详细信息来自 json 如何解决这个我不知道

标签: javascriptgoogle-mapsvue.js

解决方案


声明组件的正确方法是: <gmap-map :center="{lat: propertydata.latitude, lng: propertydata.longitude}" :zoom="14" style="width:500px; height:500px;"></gmap-map>

您应该{{...}}只在标签内使用语法,而不是在标签属性中。


推荐阅读