vue使用高德地图动态设置marker,polyline,点击显示。
按照高德官网,引入sdk。效果如下点击地图上的车辆icon显示它的轨迹,右上角的选择框效果如下选中车牌将它的位置定位到地图中心,并设置地图缩放等级。initMap(e, p) {//e:经纬度,p:zoomlet that = this;var map = new AMap.Map("map", {center: [120.67, 30.07], // [纬度,经度]resizeEnable: t
·
按照高德官网,引入sdk。
效果如下
点击地图上的车辆icon显示它的轨迹,右上角的选择框效果如下
选中车牌将它的位置定位到地图中心,并设置地图缩放等级。
initMap(e, p) {//e:经纬度,p:zoom
let that = this;
var map = new AMap.Map("map", {
center: [120.67, 30.07], // [纬度,经度]
resizeEnable: true,
scrollWheel: true,
zoom: 12,
mapStyle: "amap://styles/macaron", //设置地图的显示样式
});
//重新设置地图中心点
if (e) {
map.setZoomAndCenter(p, e);
}
AMap.plugin(["AMap.ToolBar", "AMap.Scale"], function () {
// map.addControl(new AMap.ToolBar());
map.addControl(new AMap.Scale());
});
let locationList = that.list2;
// 添加marker
locationList.map((item) => {
let state = item.cp;
var marker = new AMap.Marker({
position: [item.lat, item.lng], //位置
offset: new AMap.Pixel(-10, -10),
map: map,
icon: require("../assets/img/car.png"), // 添加 Icon 图标 URL
});
// map.add(marker);
// 创建折线实例
var polyline = new AMap.Polyline({
path: item.path,
isOutline: true,
outlineColor: "#ffeeff",
borderWeight: 3,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 6,
// 折线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: "round",
lineCap: "round",
zIndex: 50,
});
marker.on("click", function (e) {
map.remove(map.getAllOverlays("polyline"));//删除已经存在的轨迹
map.add(polyline);
that.cp = state;
});
});
// map.setFitView(polyline, marker);
},
mounted() {
this.map = this.initMap();
},
下拉框选择代码
<div class="magWrap">
<div class="btn" v-show="checked">{{ cp }}</div>
<div class="select">
<el-select
v-model="value"
placeholder="请选择车牌"
@change="handleChange(value)"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
>
</el-option>
</el-select>
</div>
<div class="cbox">
<el-checkbox v-model="checked">显示车牌</el-checkbox>
</div>
</div>
options: [
{
value: "all",
label: "全部",
},
{
value: [120.67, 30.07],
label: "浙A15742",
},
{
value: [120.8612070444, 30.0436018444],
label: "浙B15742",
},
{
value: [120.5659987111, 29.9430935111],
label: "浙A17542",
},
],
handleChange(e) {
let center = [e[0], e[1]];
let fs = "";
if (e == "all") {
fs = 12;
center = [120.67, 30.07];
} else {
fs = 16;
}
console.log(center, "test");
this.initMap(center, fs);
},
更多推荐
已为社区贡献1条内容
所有评论(0)