|
|
@@ -0,0 +1,195 @@
|
|
|
+<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>
|
linan-0110