|
|
@@ -1,17 +1,86 @@
|
|
|
<template>
|
|
|
<div class="page">
|
|
|
<van-nav-bar title="养老服务圈" fixed placeholder safe-area-inset-top />
|
|
|
+ <div
|
|
|
+ class="map_bg"
|
|
|
+ id="container_home"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
<Tabbar />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Tabbar from '../../components/Tabbar.vue'
|
|
|
+import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
+const map = ''
|
|
|
+const AMapOut =''
|
|
|
+const placeSearch = ''
|
|
|
+const address = ''
|
|
|
export default {
|
|
|
- components: { Tabbar },
|
|
|
+ components: { Tabbar },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.initMap()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**地图初始化 */
|
|
|
+ async initMap() {
|
|
|
+ await AMapLoader.load({
|
|
|
+ key: process.env.VITE_APP_AMAP_KEY,
|
|
|
+ version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
|
|
+ plugins: ["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Geolocation"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
|
|
|
+ })
|
|
|
+ .then((AMap) => {
|
|
|
+ AMapOut.value = AMap;
|
|
|
+ map.value = new AMap.Map("container_home", {
|
|
|
+ //设置地图容器id
|
|
|
+ center: [114.057999, 22.5436],
|
|
|
+ zoom: 11, //初始化地图级别
|
|
|
+ });
|
|
|
+
|
|
|
+ var autoOptions = {
|
|
|
+ // 城市,默认全国
|
|
|
+ city: "深圳",
|
|
|
+ // 使用联想输入的input的id
|
|
|
+ input: "address",
|
|
|
+ };
|
|
|
+
|
|
|
+ // var autocomplete = new AMap.AutoComplete(autoOptions);
|
|
|
+ placeSearch.value = new AMap.PlaceSearch({
|
|
|
+ city: "深圳",
|
|
|
+ citylimit: true,
|
|
|
+ pageSize: 1, // 单页显示结果条数
|
|
|
+ pageIndex: 1, // 页码
|
|
|
+ });
|
|
|
+ nextTick(()=>{
|
|
|
+ var autocomplete = new AMap.AutoComplete(autoOptions);
|
|
|
+ autocomplete.on("select", function add (e) {
|
|
|
+ address.value = e.poi.name;
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ .catch((e) => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+}
|
|
|
+.map_bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: antiquewhite;
|
|
|
+}
|
|
|
</style>
|