[google map] CloseBuy APP

课程学习：https://www.udemy.com/course/vuejs-google-maps-api-for-beginners/learn/lecture/17820124#overview

此乃实践笔记。

 

 

Note 1

  

• 小结一

Ref: https://wpstorelocator.co/document/create-google-api-keys/

解决红色错误：注意替换掉代码中三处key。

 

• 小结二

先确定自定位可用。

API keys with referer restrictions cannot be used with this API.

Ref: https://developers.google.com/maps/faq#browser-keys-blocked-error

How do I resolve the error: "API keys with referer restrictions cannot be used with this API."?

You are using any of the web service APIs with an API key restricted to an HTTP referer. For security reasons, web service APIs need to use API keys restricted to IP addresses.

1. Switch your key restriction type from an HTTP referer restriction to an IP address restriction,
2. or create a new API key if your key is already used with the Maps JavaScript API.

 

改为IP, 然后查询本地的IP地址。其实报错的话，也会返回实际的公网IP地址。然后，添加进restrictions即可。

 

 

Note 2

解决方案：https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

{
   "html_attributions" : [],
   "next_page_token" : "...",
   "results" : [
      {
         "business_status" : "OPERATIONAL",
         "geometry" : {
            "location" : {
               "lat" : -38.17194930000001,
               "lng" : 144.3246195
            },
            "viewport" : {
               "northeast" : {
                  "lat" : -38.1706333697085,
                  "lng" : 144.3258898802915
               },
               "southwest" : {
                  "lat" : -38.1733313302915,
                  "lng" : 144.3231919197085
               }
            }
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/restaurant-71.png",
         "name" : "Malee Thai Highton",
         "opening_hours" : {
            "open_now" : false
         },
         "photos" : [
            {
               "height" : 2448,
               "html_attributions" : [
                  "\u003ca href=\"https://maps.google.com/maps/contrib/101253280489579276620\"\u003eMalee Thai Highton\u003c/a\u003e"
               ],
               "photo_reference" : "ATtYBwLIOz63NuCx5m5QljGMRP ...",
               "width" : 3264
            }
         ],
         "place_id" : "ChIJu1RLLAsT1GoRcRqwhkHKzGI",
         "plus_code" : {
            "compound_code" : "R8HF+6R Highton VIC, Australia",
            "global_code" : "4RH6R8HF+6R"
         },
         "price_level" : 2,
         "rating" : 4.1,
         "reference" : "ChIJu1RLLAsT1GoRcRqwhkHKzGI",
         "scope" : "GOOGLE",
         "types" : [ "restaurant", "food", "point_of_interest", "establishment" ],
         "user_ratings_total" : 147,
         "vicinity" : "6/1-3 Belle Vue Avenue, Highton"
      },
      {
         "business_status" : "OPERATIONAL",
         "geometry" : {
            "location" : {
               "lat" : -38.20058720000001,
               "lng" : 144.320429
            },
            "viewport" : {
               "northeast" : {
                  "lat" : -38.1991842697085,
                  "lng" : 144.3218761802915
               },
               "southwest" : {
                  "lat" : -38.2018822302915,
                  "lng" : 144.3191782197085
               }
            }
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/cafe-71.png",
         "name" : "Panache Cafe & Creperie",
         "opening_hours" : {
            "open_now" : true
         },
         "photos" : [
            {
               "height" : 3518,
               "html_attributions" : [
                  "\u003ca href=\"https://maps.google.com/maps/contrib/112516884335859611512\"\u003eTahlia Foss\u003c/a\u003e"
               ],
               "photo_reference" : "ATtYBwKXoAHQLfebRYLNp ...",
               "width" : 3021
            }
         ],
         "place_id" : "ChIJAas5rTYT1GoRDaLalPy2SVM",
         "plus_code" : {
            "compound_code" : "Q8XC+Q5 Waurn Ponds VIC, Australia",
            "global_code" : "4RH6Q8XC+Q5"
         },
         "price_level" : 2,
         "rating" : 3.9,
         "reference" : "ChIJAas5rTYT1GoRDaLalPy2SVM",
         "scope" : "GOOGLE",
         "types" : [
            "cafe",
            "restaurant",
            "food",
            "point_of_interest",
            "store",
            "establishment"
         ],
         "user_ratings_total" : 189,
         "vicinity" : "M4B, 173-199 Pioneer Road, Waurn Ponds"
      }
   ],
   "status" : "OK"
}

 

 

Note 3

调整 Layout。宽度默认分成了16份。

 

 

 

 

 

Continue ...