|
|
@@ -1,25 +1,6 @@
|
|
|
<template>
|
|
|
<div class="content">
|
|
|
- <el-row class="search-row">
|
|
|
- <el-col :span="5">
|
|
|
- <div class="grid-content bg-purple">
|
|
|
- <el-input
|
|
|
- id="keyword"
|
|
|
- v-model="searchValue"
|
|
|
- placeholder="请输入地址"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col :span="12">
|
|
|
- <div class="grid-content bg-purple-light">
|
|
|
- <el-button type="primary" @click="searchKeyword">搜索</el-button>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <div id="container">门店覆盖区域</div>
|
|
|
- <!-- <div style="width: 500px; height: 180px" id="infoDiv"></div> -->
|
|
|
+ <div id="container"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -40,97 +21,42 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
async init() {
|
|
|
- var latlngBounds = new qq.maps.LatLngBounds();
|
|
|
- //设置Poi检索服务，用于本地检索、周边检索
|
|
|
- searchService = new qq.maps.SearchService({
|
|
|
- //设置搜索范围为北京
|
|
|
- location: "上海",
|
|
|
- //设置搜索页码为1
|
|
|
- pageIndex: 1,
|
|
|
- //设置每页的结果数为5
|
|
|
- pageCapacity: 5,
|
|
|
- //设置展现查询结构到infoDIV上
|
|
|
- panel: document.getElementById("infoDiv"),
|
|
|
- //设置动扩大检索区域。默认值true，会自动检索指定城市以外区域。
|
|
|
- autoExtend: true,
|
|
|
- //检索成功的回调函数
|
|
|
- complete: function(results) {
|
|
|
- console.log(results);
|
|
|
- //设置回调函数参数
|
|
|
- var pois = results.detail.pois;
|
|
|
- for (var i = 0, l = pois.length; i < l; i++) {
|
|
|
- var poi = pois[i];
|
|
|
- //扩展边界范围，用来包含搜索到的Poi点
|
|
|
- latlngBounds.extend(poi.latLng);
|
|
|
- var marker = new qq.maps.Marker({
|
|
|
- map: map,
|
|
|
- position: poi.latLng
|
|
|
- });
|
|
|
-
|
|
|
- marker.setTitle(i + 1);
|
|
|
-
|
|
|
- markers.push(marker);
|
|
|
- }
|
|
|
- //调整地图视野
|
|
|
- map.fitBounds(latlngBounds);
|
|
|
- },
|
|
|
- //若服务请求失败，则运行以下函数
|
|
|
- error: function() {
|
|
|
- that.$message.error("请输入正确地址！");
|
|
|
- }
|
|
|
- });
|
|
|
- //步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
|
|
|
//设置地图中心点
|
|
|
- var myLatlng = new qq.maps.LatLng(31.169083, 121.432358);
|
|
|
+ var myLatlng = new TMap.LatLng(31.169083, 121.432358);
|
|
|
//定义工厂模式函数
|
|
|
var myOptions = {
|
|
|
zoom: 12, //设置地图缩放级别
|
|
|
- center: myLatlng, //设置中心点样式
|
|
|
- mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
|
|
|
+ center: myLatlng //设置中心点样式
|
|
|
+ // mapTypeId: TMap.MapTypeId.ROADMAP //设置地图样式详情参见MapType
|
|
|
};
|
|
|
//获取dom元素添加地图信息
|
|
|
- var map = new qq.maps.Map(
|
|
|
- document.getElementById("container"),
|
|
|
- myOptions
|
|
|
- );
|
|
|
- // new qq.maps.MarkerImage(shop_icon);
|
|
|
+ var map = new TMap.Map(document.getElementById("container"), myOptions);
|
|
|
+ // new TMap.MarkerImage(shop_icon);
|
|
|
let res = await getshopmt();
|
|
|
-
|
|
|
+ let geometries = [];
|
|
|
res.forEach(v => {
|
|
|
- new qq.maps.Circle({
|
|
|
- //圆形的中心点坐标。
|
|
|
- center: new qq.maps.LatLng(v.lat - 0, v.lng - 0),
|
|
|
- //圆形是否可点击。
|
|
|
- clickable: true,
|
|
|
-
|
|
|
- //鼠标在圆形内的光标样式。
|
|
|
- cursor: "pointer",
|
|
|
-
|
|
|
- //圆形的填充色，可通过Color对象的alpha属性设置透明度。
|
|
|
- //fillColor: "#00f",
|
|
|
- fillColor: new qq.maps.Color(0, 15, 255, 0.3),
|
|
|
-
|
|
|
- //要显示圆形的地图。
|
|
|
- map: map,
|
|
|
-
|
|
|
- //圆形的半径。
|
|
|
- radius: 3000,
|
|
|
-
|
|
|
- //圆形的边框颜色，可通过Color对象的alpha属性设置透明度。
|
|
|
- strokeColor: "rgba(0,0,0,0)",
|
|
|
-
|
|
|
- //圆形的边框样式。实线是solid，虚线是dash。
|
|
|
- // strokeDashStyle: "solid",
|
|
|
-
|
|
|
- //圆形的边框线宽。
|
|
|
- strokeWeight: 1,
|
|
|
-
|
|
|
- //圆形是否可见。
|
|
|
- visible: true,
|
|
|
+ if (v.lat) {
|
|
|
+ geometries.push({
|
|
|
+ styleId: "circle",
|
|
|
+ center: new TMap.LatLng(v.lat, v.lng),
|
|
|
+ // position: new TMap.LatLng(v.lat, v.lng),
|
|
|
+ radius: 3000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- //圆形的zIndex值。
|
|
|
- zIndex: 1000
|
|
|
- });
|
|
|
+ var circle = new TMap.MultiCircle({
|
|
|
+ map,
|
|
|
+ styles: {
|
|
|
+ // 设置圆形样式
|
|
|
+ circle: new TMap.CircleStyle({
|
|
|
+ color: "rgba(41,91,255,0.16)",
|
|
|
+ showBorder: true,
|
|
|
+ borderColor: "rgba(41,91,255,1)",
|
|
|
+ borderWidth: 1
|
|
|
+ })
|
|
|
+ },
|
|
|
+ geometries
|
|
|
});
|
|
|
},
|
|
|
getData() {
|
|
|
@@ -143,17 +69,6 @@ export default {
|
|
|
resolve(myJson);
|
|
|
});
|
|
|
});
|
|
|
- },
|
|
|
- searchKeyword() {
|
|
|
- this.clearOverlays(markers);
|
|
|
- //根据输入的关键字在搜索范围内检索
|
|
|
- searchService.search(this.searchValue);
|
|
|
- },
|
|
|
- clearOverlays(overlays) {
|
|
|
- var overlay;
|
|
|
- while ((overlay = overlays.pop())) {
|
|
|
- overlay.setMap(null);
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -165,7 +80,7 @@ export default {
|
|
|
}
|
|
|
#container {
|
|
|
width: 100%;
|
|
|
- height: 85vh;
|
|
|
+ height: 90vh;
|
|
|
}
|
|
|
.search-row {
|
|
|
padding-bottom: 20px;
|
