|
|
@@ -3,7 +3,9 @@
|
|
|
<div class="hui-flex-box hui-dialog-content" style="padding: 0;padding-bottom: 20px;">
|
|
|
<div class="map">
|
|
|
<div class="map-input" v-if="type == 'insert'">
|
|
|
- <input type="text" placeholder="请输入地理位置" v-model="input" id="tipinput" />
|
|
|
+ <el-autocomplete v-model="input" :fetch-suggestions="querySearchAsync" placeholder="请输入地理位置"
|
|
|
+ @select="handleSelect">
|
|
|
+ </el-autocomplete>
|
|
|
</div>
|
|
|
<div ref="gaode_Map" id="gaode_Map"></div>
|
|
|
</div>
|
|
|
@@ -15,11 +17,6 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import AMapLoader from "@amap/amap-jsapi-loader"; //引入AMapLoader
|
|
|
- window._AMapSecurityConfig = {
|
|
|
- // 设置安全密钥
|
|
|
- securityJsCode: "3e392dc7eb2cf2c04b1b8899776e8905",
|
|
|
- };
|
|
|
export default {
|
|
|
props: ['coordinates', 'type'],
|
|
|
data() {
|
|
|
@@ -27,60 +24,52 @@
|
|
|
map: {},
|
|
|
input: '',
|
|
|
markers: [],
|
|
|
- address: [116.397428, 39.90923],
|
|
|
- visible: false
|
|
|
+ address: [116.39121, 39.90715],
|
|
|
+ visible: false,
|
|
|
+ timeout: null
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- if (this.coordinates) this.address = this.coordinates.split(',');
|
|
|
+ if (this.coordinates) {
|
|
|
+ this.address = this.coordinates.split(',');
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
this.initMap();
|
|
|
},
|
|
|
- beforeDestroy() {
|
|
|
- this.map && this.map.destroy();
|
|
|
- },
|
|
|
methods: {
|
|
|
initMap() {
|
|
|
- AMapLoader.load({
|
|
|
- key: "880f8193c52d9dee80cd82212d9508cf", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
- version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
- plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"],
|
|
|
- }).then((AMap) => {
|
|
|
- this.map = new AMap.Map("gaode_Map", {
|
|
|
- // 设置地图容器id
|
|
|
- viewMode: "3D", // 是否为3D地图模式
|
|
|
- zoom: 18, // 初始化地图级别
|
|
|
- center: this.address, //中心点坐标
|
|
|
- resizeEnable: true,
|
|
|
- });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let position = new T.LngLat(this.address[0], this.address[1]);
|
|
|
+ this.map = new T.Map('gaode_Map');
|
|
|
+ this.map.centerAndZoom(position, 18);
|
|
|
this.setMarker();
|
|
|
- if (this.type === 'look') return;
|
|
|
- this.searchMap();
|
|
|
- // 监听鼠标点击事件
|
|
|
- this.map.on("click", this.clickMapHandler);
|
|
|
- }).catch((e) => {});
|
|
|
+ this.map.addEventListener('click', this.clickMapHandler);
|
|
|
+ })
|
|
|
},
|
|
|
- searchMap() {
|
|
|
- // 搜索框自动完成类
|
|
|
- let auto = new AMap.AutoComplete({
|
|
|
- input: "tipinput", // 使用联想输入的input的id
|
|
|
- });
|
|
|
- //构造地点查询类
|
|
|
- let placeSearch = new AMap.PlaceSearch({
|
|
|
- map: this.map,
|
|
|
- });
|
|
|
- // 当选中某条搜索记录时触发
|
|
|
- auto.on("select", e => {
|
|
|
- if (e.poi.location) {
|
|
|
- placeSearch.setCity(e.poi.adcode);
|
|
|
- placeSearch.search(e.poi.name);
|
|
|
- this.address = [e.poi.location.lng, e.poi.location.lat];
|
|
|
- this.setMarker();
|
|
|
- } else {
|
|
|
- this.$message.error("查询地址失败，请重新输入地址");
|
|
|
+ querySearchAsync(queryString, cb) {
|
|
|
+ if (!queryString) return;
|
|
|
+ let search = new T.LocalSearch(this.map, {
|
|
|
+ pageCapacity: 6,
|
|
|
+ onSearchComplete: data => {
|
|
|
+ if (data.pois) {
|
|
|
+ let searchData = data.pois.map(node => {
|
|
|
+ return {
|
|
|
+ value: node.name + '-' + node.address,
|
|
|
+ lonlat: node.lonlat
|
|
|
+ }
|
|
|
+ });
|
|
|
+ cb(searchData)
|
|
|
+ }
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
+ search.search(queryString, 1);
|
|
|
+ },
|
|
|
+ handleSelect(item) {
|
|
|
+ this.address = item.lonlat.split(',');
|
|
|
+ this.map.clearOverLays();
|
|
|
+ this.map.panTo(new T.LngLat(this.address[0], this.address[1]));
|
|
|
+ this.setMarker();
|
|
|
},
|
|
|
// 点击地图事件获取经纬度，并添加标记
|
|
|
clickMapHandler(e) {
|
|
|
@@ -89,18 +78,12 @@
|
|
|
},
|
|
|
// 添加标记
|
|
|
setMarker() {
|
|
|
- this.removeMarker();
|
|
|
- let marker = new AMap.Marker({
|
|
|
- position: this.address,
|
|
|
+ this.map.clearOverLays();
|
|
|
+ let position = new T.LngLat(this.address[0], this.address[1]);
|
|
|
+ let mark = new T.Marker(position, {
|
|
|
+ z: 12
|
|
|
});
|
|
|
- marker.setMap(this.map);
|
|
|
- this.markers.push(marker);
|
|
|
- },
|
|
|
- // 删除之前后的标记点
|
|
|
- removeMarker() {
|
|
|
- if (this.markers) {
|
|
|
- this.map.remove(this.markers);
|
|
|
- }
|
|
|
+ this.map.addOverLay(mark);
|
|
|
},
|
|
|
submit() {
|
|
|
this.$emit('callback', 'set', this.address);
|
|
|
@@ -133,12 +116,14 @@
|
|
|
box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
|
|
|
border-radius: 3px;
|
|
|
|
|
|
- input {
|
|
|
+ .el-autocomplete {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- height: 38px;
|
|
|
- line-height: 38px;
|
|
|
- padding: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ color: #000;
|
|
|
+ border: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
