介绍
vue-google-maps-location-selector npm 包是一个基于 Vue.js 的 Google Maps 地址选择器组件，可以让用户在地图上选择地址并获取该地点的经纬度信息。该组件的功能非常实用，特别适合用于需要用户选择地点的 Web 应用程序中。
安装
要使用 vue-google-maps-location-selector npm 包，您需要在项目中安装 Vue.js 和 Google Maps JavaScript API。
首先，打开终端并进入项目目录，执行以下命令安装 Vue.js：
npm install vue
接着，安装 Google Maps JavaScript API：
npm install @googlemaps/js-api-loader
最后，安装 vue-google-maps-location-selector：
npm install vue-google-maps-location-selector
使用
安装完成后，在 Vue.js 应用程序中引入并注册 vue-google-maps-location-selector：
import Vue from 'vue'
import VueGoogleMapsLocationSelector from 'vue-google-maps-location-selector'
Vue.component('VueGoogleMapsLocationSelector', VueGoogleMapsLocationSelector)接着，在模板中使用该组件：
-- -------------------- ---- -------
----------
-----
------------------------------
----------------------
----------------
----------------------------------
--
------
-----------具体地，这个组件接受以下 prop：
apikey：您的 Google Maps API Key，这是必要的参数。center：地图的中心点坐标，格式为{ lat: 纬度, lng: 经度 }。如果没有传入则使用默认值。zoom：缩放比例，默认为15。markerIcon：地点标记的图标路径，默认为''。hideInfoPanel：是否隐藏用户信息面板，默认为false。
并发出以下自定义事件：
locationChange：当用户选择位置时触发，将位置信息作为参数传递给您的处理函数。
例如，您可以在 onLocationChange 方法里从 event 中获取新的经纬度信息，完成用户选择地址后的调用响应：
onLocationChange(event) {
console.log('New location:', event.latlng)
}示例代码
-- -------------------- ---- -------
----------
-----
------------------------------
----------------------
----------------
----------------------------------
--
------
-----------
--------
------ --- ---- -----
------ ----------------------------- ---- -----------------------------------
---------------------------------------------- ------------------------------
------ ------- -
------ -
------ -
------------- ---------------
------- - ---- ----------- ---- ----------- -
-
--
-------- -
----------------------- -
---------------- ----------- -------------
-
-
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005585581e8991b448d58b5