123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- <template>
- <div class="container">
- <div class="search-box">
- <el-input
- v-model="searchKey"
- @keyup.enter.native="searchByHand"
- placeholder="请输入内容"
- class="input-with-select"
- >
- <el-button slot="append" icon="el-icon-search" @click="searchByHand"></el-button>
- </el-input>
- <!-- <input v-model="searchKey" type="search" id="search" />
- <button @click="searchByHand">搜索</button>-->
- <div class="tip-box" id="searchTip"></div>
- </div>
- <!--
- amap-manager: 地图管理对象
- vid:地图容器节点的ID
- zooms: 地图显示的缩放级别范围,在PC上,默认范围[3,18],取值范围[3-18];在移动设备上,默认范围[3-19],取值范围[3-19]
- center: 地图中心点坐标值
- plugin:地图使用的插件
- events: 事件
- -->
- <el-amap
- class="amap-box"
- :amap-manager="amapManager"
- :vid="'amap-vue'"
- :zoom="zoom"
- :plugin="plugin"
- :center="center"
- :events="events"
- mapStyle="fresh"
- >
- <!-- 标记 -->
- <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker>
- </el-amap>
- </div>
- </template>
- <script>
- import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
- let amapManager = new AMapManager();
- export default {
- data() {
- let _this = this;
- return {
- address: null,
- searchKey: "",
- amapManager,
- markers: [],
- searchOption: {
- city: "全国",
- citylimit: true
- },
- center: [121.329402, 31.228667],
- zoom: 17,
- lng: 0,
- lat: 0,
- loaded: false,
- events: {
- init() {
- lazyAMapApiLoaderInstance.load().then(() => {
- _this.initSearch();
- });
- },
- // 点击获取地址的数据
- click(e) {
- _this.markers = [];
- let { lng, lat } = e.lnglat;
- _this.lng = lng;
- _this.lat = lat;
- _this.center = [lng, lat];
- _this.markers.push([lng, lat]);
- // 这里通过高德 SDK 完成。
- let geocoder = new AMap.Geocoder({
- radius: 1000,
- extensions: "all"
- });
- console.log(geocoder);
- geocoder.getAddress([lng, lat], function(status, result) {
- if (status === "complete" && result.info === "OK") {
- if (result && result.regeocode) {
- _this.address =
- result.regeocode.formattedAddress;
- _this.searchKey =
- result.regeocode.formattedAddress;
- _this.$nextTick();
- }
- }
- });
- }
- },
- // 一些工具插件
- plugin: [
- // {
- // pName: 'Geocoder',
- // events: {
- // init (o) {
- // console.log(o.getAddress())
- // }
- // }
- // },
- {
- // 定位
- pName: "Geolocation",
- events: {
- init(o) {
- // o是高德地图定位插件实例
- o.getCurrentPosition((status, result) => {
- console.log(result);
- if (result && result.position) {
- // 设置经度
- _this.lng = result.position.lng;
- // 设置维度
- _this.lat = result.position.lat;
- // 设置坐标
- _this.center = [_this.lng, _this.lat];
- _this.markers.push([_this.lng, _this.lat]);
- // load
- _this.loaded = true;
- // 页面渲染好后
- _this.$nextTick();
- }
- });
- }
- }
- },
- {
- // 工具栏
- pName: "ToolBar",
- events: {
- init(instance) {
- console.log(instance);
- }
- }
- },
- {
- // 鹰眼
- pName: "OverView",
- events: {
- init(instance) {
- console.log(instance);
- }
- }
- },
-
- {
- // 搜索
- pName: "PlaceSearch",
- events: {
- init(instance) {
- console.log(instance);
- }
- }
- }
- ]
- };
- },
- methods: {
- initSearch() {
- let vm = this;
- let map = this.amapManager.getMap();
- AMapUI.loadUI(
- [
- "overlay/SimpleMarker", //SimpleMarker
- "overlay/SimpleInfoWindow" //SimpleInfoWindow
- ],
- function(SimpleMarker, SimpleInfoWindow) {
- console.dir(SimpleMarker)
- //....引用加载的UI....
- }
- );
- },
- searchByHand() {
- console.log("666");
- // this.poiPicker.searchByKeyword(this.searchKey)
- }
- }
- };
- </script>
- <style lang="scss" scope>
- .container {
- width: 100%;
- height: 100%;
- .search-box {
- margin-bottom: 15px;
- }
- }
- </style>
|