First, the introduction of high moral map of index.html js
<script src="https://webapi.amap.com/maps?v=1.4.14&key=你的key"></script>
Then write html section
<template> <div class="mymapM"> <!--捜索--> <div v-if="loading" class="loading"> <van-loading type="spinner" /> </div> <div class="search-box"> <div class="search-postion"> <span class="buts">返回</span> <input type="text" placeholder="输入关键字搜索" v-model="search_key" /> <span class="clear" v-if="search_key" @click="search_key ='' "> <van-icon color="#8f8f8f" name="clear" /> </span> <span class="buts border_but" @click="keySearch()">捜索</span> </div> </div> <div class="con-box con-map" v-if="!search_key"> <!--地图--> <div class="mapbox"> <div class="map" id="container"></div> <div class="sign"></div> </div> </div> <div class="con-box" v-if="!search_key"> <!--地址列表--> <div class="Hlist-box"> <ul> <li v-for="(item, index) in lists" :key="index" @click="onAddressLi(item)"> <b> <van-icon color="#a6a6a6" name="clock" /> </b> <div> <span>{{item.name}}</span> <p>{{item.address}}</p> </div> </li> </ul> </div> </div> <!--捜索列表--> <div class="search-list" v-if="search_key"> <ul> <li v-for="(item, index) in search_list" :key="index" @click="onSearchLi(item.location)"> <span>{{item.name}}</span> <p>{{item.address}}</p> </li> <li v-if="noSearchShow"> <the p- > No search results </ the p- > </ li > </ ul > </ div > </ div > </ Template >
css section
<style lang="scss" scoped> .con-map { height: 190px; width: 100%; } .con-box { .mapbox { margin-bottom: 10px; position: fixed; z-index: 111; width: 100%; height: 180px; padding: 10px 0; background: #eceeee; .map { width: 100%; height: 180px; } } .Hlist-box { width: 96%; margin: 0 auto; background: #fff; border-radius: 5px; li { height: 40px; padding: 14px 22px; border-bottom: 1px solid #d9d9d9; display: flex; b { display: inline-block; i { margin: 18px 18px 0 0; } } div { width: 100%; } span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 15px; display: inline-block; width: 90%; } p { margin-top: 10px; color: #a6a6a6; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 13px; width: 90%; } } } } .mymapM { .search-box { height: 48px; line-height: 48px; background: #fff; border-bottom: 1px solid #bfbec4; .search-postion { height: 48px; line-height: 48px; background: #fff; border-bottom: 1px solid #bfbec4; width: 100%; position: fixed; z-index: 99999; display: flex; input { flex: 4; height: 14px; padding: 16px 0; border: none; text-indent: 10px; } .clear { margin: 2px 6px; } .buts { width: 15%; text-align: center; display: inline-block; flex: 1; } .border_but { border-left: 1px solid #8f8f8f; height: 14px; line-height: 14px; margin: 17px 0; } } } .search-list { width: 96%; margin: 0 auto; margin-top: 10px; border-radius: 5px; background: #fff; li { height: 40px; padding: 14px 22px; border-bottom: 1px solid #d9d9d9; span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 15px; display: inline-block; width: 90%; } p { margin-top: 10px; color: #a6a6a6; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 13px; width: 90%; } } } } .loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999999; } </style>
js part
<Script> Export default { Data () { return { Center: [ 116.42792, 39.902896], // Longitude Latitude + SEARCH_KEY: "", // search value Lists: [], // list of places search_list: [], // search result marker: "" , loading: to false , noSearchShow: to false // no search results suggest that the search results are displayed without no search result }; }, Mounted () { the setTimeout (() => { the this .adMap (); }, 1000); }, Methods: { ADMAP () { the this .loading = to true ; // initialize the map var Map = new new AMap.Map ( "Container" , { Zoom: 14, // zoom level Center: the this .center // Set map center // resizeEnable: to true, // initialize the map to locate the current city loaded }); // get the initial center point and assign var currentCenter = map.getCenter (); // this method is to get the current center of the map this = .center [currentCenter.lng, currentCenter.lat]; // the acquired latitude and longitude of the center point assigned to the data center the console.log ( the this .center); // create tag the this .marker = new new AMap.Marker ({ position: new new AMap.LngLat (currentCenter.lng, currentCenter.lat) // Coordinates objects, may be formed of a latitude and longitude dimensional array [116.39, 39.9] }); // point to create the mark added to an existing map instance: map.add ( the this .marker); // depending on the location map near the center point of the investigation, this method under the this . centerSearch (); // listen for events to move the map and get map center at the end of the movement and update the list of places var moveendFun = E => { // get map center currentCenter = map.getCenter (); the this .center = [currentCenter.lng, currentCenter.lat]; the this .marker.setPosition ([currentCenter.lng, currentCenter.lat]); // update flag position // depending on the location close to center of the map search }; // update data var centerSearch = () => { the this .loading = to true ; the this .centerSearch (); }; // bind events moving map event map.on ( "mapmove", moveendFun); // update flag map.on ( "the MoveEnd", centerSearch); // update data }, centerSearch () { AMap.service (["AMap.PlaceSearch"], () => { // constructor location query class var placeSearch = new new AMap.PlaceSearch ({ of the type: "car service | catering services | Shopping Service | Domestic services | sports and leisure services | health care | accommodation service | Sightseeing | business residential | government agencies and social organizations | education and culture services | transport services | financial and insurance services | corporate | names address information ", // POI category pageSize: 30, // single page display results the number of pageIndex: 1, // page city: "National", // a point of interest the city autoFitView: false // whether to automatically adjust the map view Marker plotted points are in the visible range of the viewport }); // according to the map center check point near the place placeSearch.searchNearBy ( "" , [ The this .center [0], the this .center [. 1 ]], 200 is , (Status, Result) => { IF (Status == "Complete" ) { the this .lists = result.poiList.pois; // query location assignment to the this .loading = to false ; } } ); }); }, keySearch () { the this .loading = to true ; AMap.service ([ "AMap.PlaceSearch"], () => { // configured Location query class var placeSearch = new new AMap.PlaceSearch ({ of the type: "car service | catering services | Shopping Service | Domestic services | sports and leisure services | health care | accommodations | attractions | Business Residential | government agencies and community groups | Culture & Education Services | transport services | financial and insurance services | corporate | names address information ", // POI category pageSize: 30, // a single page number Showing results pageIndex: 1, // page city:" National ", // interest point city citylimit: false , // whether to force the city to restrict the search within a set autoFitView: false // whether to automatically adjust the map view Marker plotted points are in the visible range of the viewport }); // keyword query placeSearch.search ( the this.search_key, (status, result) => { if (status == "complete") { if (result.poiList.count === 0) { this.noSearchShow = true; } else { this.search_list = result.poiList.pois; //将查询到的地点赋值 this.noSearchShow = false; this.loading = false; } } else { this.search_list = []; this.noSearchShow = true; } }); }); }, onAddressLi(e) { console.log(e); this.marker.setPosition([e.location.lng, e.location.lat]); //更新标记的位置 }, onSearchLi(e) { console.log(e.lng + "-" + e.lat); this.center = [e.lng, e.lat]; console.log(this.center); this.search_key = ""; // this.loading=true; setTimeout(() => { this.adMap(); }, 1000); } }, watch: { search_key(newv, oldv) { if (newv == "") { this.search_list = []; this.noSearchShow = false; setTimeout(() => { this.adMap(); }, 1000); } } } }; </script>
Renderings
