摸索摸索百度地图自定义图标
文章有点烂，仅自己记录
<template>
<div class="count" @click="addCount">click me {{count}}</div>
<div id="map"></div>
</template>
<!--
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=秘钥"></script>
-->
<script>
// import Vue 不是必须的，需要手动指定 Vue 的版本时，可以解开注释
// import Vue from 'vue';
export default {
data() {
return {
count: 0,
};
},
methods: {
addCount() {
this.count += 1;
},
// 地图---
let getG = (id) => {
return document.getElementById(id);
}
let map_init = () => {
let map = new BMap.Map("map");
console.log('map-----', map);
//第1步：设置地图中心点，成都市
// var point = new BMap.Point(104.082684, 30.656319);
//第2步：初始化地图,设置中心点坐标和地图级别。
// map.centerAndZoom(point, 13);
map.centerAndZoom('浦江县', 13);
//第3步：启用滚轮放大缩小
map.enableScrollWheelZoom();
// map.enableContinuousZoom();
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input" : "suggestId",
"location" : map
}
);
ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
console.log('e-----------', e);
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
// console.log('panel--------', this.getG());
// getG("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
console.log('点击------', e);
var _value = e.item.value;//-----> 地址详情
// myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
// // poi.townName + poi.villageName
// mapMarker.value.townName = _value.district
// mapMarker.value.villageName = _value.business
// mapMarker.value.task_type = 9
// this.G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
setPlace(map, myValue);
});
//第4步：向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
// //第5步：向地图中添加缩略图控件
// var ctrlOve = new window.BMap.OverviewMapControl({
// anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
// isOpen: 1
// });
// map.addControl(ctrlOve);
//第6步：向地图中添加比例尺控件
// var ctrlSca = new window.BMap.ScaleControl({
// anchor: BMAP_ANCHOR_BOTTOM_LEFT
// });
// map.addControl(ctrlSca);
//第7步：绘制点
// markerArr 点位地址对象数组
console.log('data.markerArr-----', data.markerArr);
for(var i = 0; i < data.markerArr.length; i++) {
console.log(666, data.markerArr[i]);
var p0 = data.markerArr[i].jd//point.split(",")[0];
var p1 = data.markerArr[i].wd//point.split(",")[1];
var maker = addMarker(map,new window.BMap.Point(p0, p1), i, data.markerArr[i].task_type);
addInfoWindow(maker, data.markerArr[i], i);
}
}
let setPlace = (map, myValue) => {
map.clearOverlays(); //清除地图上所有覆盖物
function myFun(){
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
console.log(pp,'经度：'+pp.lng, '纬度：'+pp.lat);
// mapMarker.value.jd = pp.lng
// mapMarker.value.wd = pp.lat
// data.markerArr.push(mapMarker.value)
// data.markerArr.push(mapMarker.value)
console.log('数组-----',data.markerArr );
for(var i = 0; i < data.markerArr.length; i++) {
// debugger
var p0 = data.markerArr[i].jd//point.split(",")[0];
var p1 = data.markerArr[i].wd//point.split(",")[1];
var maker = addMarker(map,new window.BMap.Point(p0, p1), i, data.markerArr[i].task_type);
addInfoWindow(maker, data.markerArr[i], i);
}
// debugger
console.log(999,mapMarker);
getG("searchResultText").value="x----->"+pp.lng+"经度->"+pp.lat;
map.centerAndZoom(pp, 18);
// map.addOverlay(new BMap.Marker(pp)); //添加标注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
// 添加标注
let addMarker = (map, point, index, state) => {
console.log('标注----',state, map, point, index);
console.log('图标------', address, ls, cs);
let noS = "http://api.map.baidu.com/img/markers.png"
// let state0 = 'https://img0.baidu.com/it/u=3420052779,2208257352&fm=253&fmt=auto&app=138&f=JPEG?w=631&h=500'
// let state1 = 'https://img1.baidu.com/it/u=2605074152,3168130545&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
// var icons = state == 1 ? state0 : (state == 2 ? state1 : noS)
var icons
// 可以根据一些参数显示什么图标
if(state != 9) {
// icons = state == 0 ? address : (state == 1 ? ls : (state == 2 ? cs : ''))
icons = urlArea.value + (state == 0 ? address : (state == 1 ? ls : (state == 2 ? cs : '')))
} else {
icons = noS
}
console.log('icons-----', icons);
// var icons = "http://api.map.baidu.com/img/markers.png"
if(state != 9) {
var myIcon = new BMap.Icon(icons,
new BMap.Size(105, 105), {
offset: new BMap.Size(10, 10),
imageOffset: new BMap.Size(0, 0 - index * 0)
}
);
} else {
var myIcon = new BMap.Icon(icons,
new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0 - index * 25)
}
);
}
var marker = new BMap.Marker(point, {
icon: myIcon
});
map.addOverlay(marker);
return marker;
}
// 添加信息窗口
let addInfoWindow = (marker, poi) => {
console.log('info------',marker, 'm----',poi);
//pop弹窗标题
// var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>';
//pop弹窗信息
var html = [];
html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
html.push('<tr>');
html.push('<td style="vertical-align:top;line-height:16px;width:38px;color: #686b73;white-space:nowrap;word-break:keep-all;font-size:14px;padding-right:20px;">地点:</td>');
html.push('<td style="vertical-align:top;line-height:16px;font-size:14px;color: #686b73;">' + '显示地点' + ' </td>');
html.push('</tr>');
html.push('<tr>');
html.push(`<td style="vertical-align:top;line-height:16px;width:38px;color:#686b73;white-space:nowrap;word-break:keep-all;font-size:14px;">经纬度:</td>`);
html.push(`<td style="vertical-align:top;line-height:16px;width:38px;color:#686b73;white-space:nowrap;word-break:keep-all;font-size:14px;">'经纬度数值'</td>`);
html.push('</tr>');
html.push('<tr>');
html.push(`<td style="vertical-align:top;line-height:16px;width:38px;color:#686b73;white-space:nowrap;font-size:14px;word-break:keep-all;line-height:26px;">状态:</td>`);
html.push(`<td style="vertical-align:top;line-height:16px;width:38px;color:#686b73;white-space:nowrap;font-size:14px;word-break:keep-all;line-height:26px;">'自定义显示文本'</td>`);
html.push('</tr>');
html.push('</tbody></table>');
html.push(`<div style="display:flex">
<div id="feedback" style="width:50%;font-size:18px;color: #428ffc;">问题反馈</div>
<div id="navigation" style="width:50%;font-size:18px;color: #363a44;">地图导航</div>`)
html.push('</div>')
var infoWindow = new BMap.InfoWindow(html.join(""), {
// title: title,
width: 200
});
var openInfoWinFun = function() {
marker.openInfoWindow(infoWindow);
};
// let fb =
// if(!infoWindow.isOpen()) {
infoWindow.addEventListener('open', e => {
document.getElementById('feedback').onclick = () => {
// this.detailMsg
console.log('问题反馈');
}
})
infoWindow.addEventListener('open', e => {
document.getElementById('navigation').onclick = () => {
// this.detailMsg
console.log('导航', poi);
location.href =`http://api.map.baidu.com/marker?location=${poi.jd},${poi.wd}&title=${poi.townName}&content=${poi.villageName+poi.townName}&output=html&src=webapp.baidu.openAPIdemo`;
}
})
// } else {
// let fb = document.getElementById('feedback')
// fb.onclick = () => {
// // this.detailMsg()
// console.log('问题反馈222');
// }
// }
marker.addEventListener("click", openInfoWinFun);
return openInfoWinFun;
}
// 百度js
let map_load = () => {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
document.body.appendChild(load);
}
},
};
</script>
<style>
.count {
color: red;
}
</style>
