工作笔记-Vue.js使用高德地图jsAPI计算两点间距离

工作笔记-Vue.js使用高德地图jsAPI计算两点间距离

六月 01, 2020 阅读量

工作笔记-Vue.js使用高德地图jsAPI计算两点间距离

只是在Vue里用到，主要还是高德地图jsAPI的逻辑，记录一下，以备后用

vue-amap

vue-amap基于 Vue 2.x 和高德地图的地图组件。Vue不是很熟悉，从文档中复制粘贴，这里只提一下。

npm安装npm install vue-amap --save

引入vue-amap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import Vue from 'vue';
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: "你的高德地图key",
  plugin: [
    "Autocomplete",
    "PlaceSearch",
    "Scale",
    "OverView",
    "ToolBar",
    "MapType",
    "PolyEditor",
    "AMap.CircleEditor"
  ],
  // 默认高德 sdk 版本为 1.4.4
  v: "1.4.4"
});
data() {
  return {
    // 地图
    zoom: 12,
    center: [117.055185, 36.684594],
    amapManager,
    events: {
      // o下面js中替换成map了
      init(o) {……}
    }
  }
}

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<el-col :span="16">
  <el-form-item label prop="code">
    <div class="amap-page-container">
      <el-amap
        vid="amapDemo"
        :center="center"
        :amap-manager="amapManager"
        :zoom="zoom"
        :events="events"
        class="amap-demo"
      ></el-amap>
    </div>
  </el-form-item>
</el-col>

高德地图jsAPI

主要记录这部分代码，后来从Vue中独立出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.4&key=你的高德地图key&plugin=AMap.Geocoder"></script>
<script>
var map = new AMap.Map('container');

var markers = [];
var contentAry = ["注册", "发函", "回函"];
var lineStyleAry = ["#80d8ff", "#ff304e"];
var textStyleAry = [
	{"background-color": "#29b6f6", "border-color": "#e1f5fe", "font-size": "12px"},
	{"background-color": "#f62972", "border-color": "#fee1ee", "font-size": "12px"}
]

// 地理编码，什么时候检索完不可控（顺序有时也会变）
var index = 0;
/*
var geocoder = new AMap.Geocoder({
	city: "010", //城市设为北京，默认：“全国”
});
geoCode("八大胡同");
geoCode("三里屯");
geoCode("中关村");

function geoCode(address) {
	geocoder.getLocation(address, function(status, result) {
		if (status === 'complete' && result.geocodes.length) {
			var lnglat = result.geocodes[0].location;
			var marker = new AMap.Marker();
			marker.setPosition(lnglat);
			map.add(marker);
			marker.setLabel({
				offset: new AMap.Pixel( - 7, -6),
				direction: "center",
				content: contentAry[index]
			});
			markers[index] = marker;
			map.setFitView(marker);
			index++;
		}
	});
}
*/
// TODO 坐标点写死
markers = [[116.386511, 39.891422], [116.457960, 39.928583], [116.315869, 39.981125]];
// 标记点
markers.forEach(function(marker) {
	var mk = new AMap.Marker({
	  map: map,
	  position: [marker[0], marker[1]]
	});
	mk.setLabel({
	  offset: new AMap.Pixel(-7, -6),
	  direction: "center",
	  content: contentAry[index]
	});
	index++;
});

// TODO 坐标点写死
var p1 = new AMap.LngLat(116.386511, 39.891422);
var p2 = new AMap.LngLat(116.457960, 39.928583);
var p3 = new AMap.LngLat(116.315869, 39.981125);
// 连线标记距离
drawLineDistance(p1, p2, lineStyleAry[0], textStyleAry[0]);
drawLineDistance(p2, p3, lineStyleAry[1], textStyleAry[1]);

// 根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别，参数均可缺省
map.setFitView();

function drawLineDistance(p1, p2, lineStyle, textStyle) {
	var textPos = p1.divideBy(2).add(p2.divideBy(2));
	// 距离
	var distance = Math.round(p1.distance(p2));
	var path = [p1, p2];

	var line = new AMap.Polyline({
		map: map,
		strokeColor: lineStyle,
		isOutline: true,
		outlineColor: "white",
		path: path
	});
	// 连线
	line.setPath(path);
	// 设置文本
	var text = new AMap.Text({
		text: "两点相距" + distance + "米",
		position: textPos,
		map: map,
		style: textStyle
	});
}
</script>
</body>

效果如下