| | |
|---|
| | | id="tipinput"
|
|---|
| | | style="width: 160px; height: 26px"
|
|---|
| | | ></a-input> -->
|
|---|
| | | <a-input
|
|---|
| | | <!-- <a-input
|
|---|
| | | v-model="input"
|
|---|
| | | placeholder="关键字搜索"
|
|---|
| | | id="tipinput"
|
|---|
| | | style="width: 160px; height: 26px"
|
|---|
| | | @change="searchMap"
|
|---|
| | | ></a-input>
|
|---|
| | | <!-- <input v-model="input" id="tipinput" /><button @click="searchAddress">
|
|---|
| | | ></a-input> -->
|
|---|
| | | <input v-model="input" id="tipinput" /><button @click="searchAddress">
|
|---|
| | | 搜索
|
|---|
| | | </button> -->
|
|---|
| | | </button>
|
|---|
| | | <div id="panel"></div>
|
|---|
| | | <!-- <a-button
|
|---|
| | | size="small"
|
|---|
| | | type="primary"
|
|---|
| | |
|---|
| | | :zoom="zoom"
|
|---|
| | | :scroll-wheel-zoom="true"
|
|---|
| | | style="height: 400px; width: 100%; margin-top: 20px"
|
|---|
| | | id="amap"
|
|---|
| | | >
|
|---|
| | | <el-amap-marker
|
|---|
| | | :position="clickPoint"
|
|---|
| | |
|---|
| | | :dragging="true"
|
|---|
| | | ></el-amap-marker>
|
|---|
| | | </el-amap>
|
|---|
| | |
|
|---|
| | | <!-- :scroll-wheel-zoom="true"-->
|
|---|
| | | <!-- <baidu-map
|
|---|
| | | :center="center"
|
|---|
| | |
|---|
| | | } from 'vue-property-decorator';
|
|---|
| | | import any = jasmine.any;
|
|---|
| | | import { get, post } from "@/util/request";
|
|---|
| | | import $ from 'jquery'
|
|---|
| | | import func from 'vue-temp/vue-editor-bridge';
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | @Component({
|
|---|
| | |
|---|
| | | // this.center.lat = newVal.lat
|
|---|
| | | }
|
|---|
| | | private created() {
|
|---|
| | | console.log(this.clickPoint,'clickPoint');
|
|---|
| | | // console.log(this.clickPoint,'clickPoint');
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // 初始化地图
|
|---|
| | |
|---|
| | | // }
|
|---|
| | | private input:any=''
|
|---|
| | | private mark:any=''
|
|---|
| | | private searchMap(){
|
|---|
| | | var autoOptions = {
|
|---|
| | | input: "tipinput"
|
|---|
| | | };
|
|---|
| | | var self=this
|
|---|
| | | var auto = new AMap.Autocomplete(autoOptions);
|
|---|
| | | const placeSearch = new AMap.PlaceSearch(self.input);
|
|---|
| | | // console.log(window);
|
|---|
| | | auto.on("select", select);//注册监听，当选中某条记录时会触发
|
|---|
| | | function select(e) {
|
|---|
| | | placeSearch.setCity(e.poi.adcode);
|
|---|
| | | placeSearch.search(e.poi.name); //关键字查询查询
|
|---|
| | | self.clickPoint = [e.poi.location.lng, e.poi.location.lat]
|
|---|
| | | // private searchMap(){
|
|---|
| | | // var autoOptions = {
|
|---|
| | | // input: "tipinput"
|
|---|
| | | // };
|
|---|
| | | // var self=this
|
|---|
| | | // var auto = new AMap.Autocomplete(autoOptions);
|
|---|
| | | // const placeSearch = new AMap.PlaceSearch(self.input);
|
|---|
| | | // // console.log(window);
|
|---|
| | | // auto.on("select", select);//注册监听，当选中某条记录时会触发
|
|---|
| | | // function select(e) {
|
|---|
| | | // placeSearch.setCity(e.poi.adcode);
|
|---|
| | | // placeSearch.search(e.poi.name); //关键字查询查询
|
|---|
| | | // self.clickPoint = [e.poi.location.lng, e.poi.location.lat]
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | private searchAddress() {
|
|---|
| | | var map = new AMap.Map("amap", {
|
|---|
| | | resizeEnable: true
|
|---|
| | | });
|
|---|
| | | var placeSearch = new AMap.PlaceSearch({ |
|---|
| | | pageSize: 5, // 单页显示结果条数
|
|---|
| | | pageIndex: 1, // 页码
|
|---|
| | | city: "全国", // 兴趣点城市
|
|---|
| | | citylimit: false, //是否强制限制在设置的城市内搜索
|
|---|
| | | panel: "panel", // 结果列表将在此容器中进行展示。
|
|---|
| | | map: map, // 展现结果的地图实例
|
|---|
| | | autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
|---|
| | | });
|
|---|
| | | //关键字查询
|
|---|
| | | placeSearch.search(this.input)
|
|---|
| | | var salf=this
|
|---|
| | | var markerone=0
|
|---|
| | | map.on('click',click);
|
|---|
| | | function click(e){
|
|---|
| | | if(markerone===1){
|
|---|
| | | map.remove(map.Marker)
|
|---|
| | | }
|
|---|
| | | salf.mapClick(e)
|
|---|
| | | map.Marker=new AMap.Marker({
|
|---|
| | | map: map,
|
|---|
| | | position: salf.clickPoint,
|
|---|
| | | animation:"AMAP_ANIMATION_BOUNCE"
|
|---|
| | | })
|
|---|
| | | markerone=1
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | // private searchAddress() {
|
|---|
| | | // var placeSearch = new AMap.PlaceSearch({ |
|---|
| | | // pageSize: 5, // 单页显示结果条数
|
|---|
| | | // pageIndex: 1, // 页码
|
|---|
| | | // city: "全国", // 兴趣点城市
|
|---|
| | | // citylimit: true, //是否强制限制在设置的城市内搜索
|
|---|
| | | // panel: "panel", // 结果列表将在此容器中进行展示。
|
|---|
| | | // autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
|---|
| | | // });
|
|---|
| | | // //关键字查询
|
|---|
| | | // placeSearch.search('北京大学');
|
|---|
| | | |
|---|
| | | // }
|
|---|
| | | // function click(e){
|
|---|
| | | // console.log(e);
|
|---|
| | | // salf.clickPoint=[e.lnglat.lng,e.lnglat.lat]
|
|---|
| | | // }
|
|---|
| | | // placeSearch.search(this.input,function(status, result){
|
|---|
| | | // console.log(result);
|
|---|
| | | // auto.on('click',click);
|
|---|
| | | // function click(e){
|
|---|
| | | // console.log(e);
|
|---|
| | | // }
|
|---|
| | | // });
|
|---|
| | | // console.log(this.input);
|
|---|
| | | }
|
|---|
| | | // 初始定位到星虹国际
|
|---|
| | | private clickPoint: any = this.lnglat === '' ? [
|
|---|
| | | 120.720262,
|
|---|
| | |
|---|
| | | ]
|
|---|
| | |
|
|---|
| | | private mapClick(e: any) {
|
|---|
| | | // console.log(e);
|
|---|
| | | const { lng, lat } = e.lnglat
|
|---|
| | | this.clickPoint=[ lng, lat]
|
|---|
| | | this.$forceUpdate()
|
|---|
| | | // console.log(this.clickPoint);
|
|---|
| | | console.log(this.clickPoint);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | private handleMapCancel() {
|
|---|
| | |
|---|
| | | background-color: white;
|
|---|
| | | max-height: 100%;
|
|---|
| | | overflow-y: auto;
|
|---|
| | | right: 0;
|
|---|
| | | left: 25px;
|
|---|
| | | width: 280px;
|
|---|
| | | top: 126px;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
