<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>地图定位</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- 引入百度API密钥 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
</head>
<style>
#allmap,body,html{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:100%;}
.infoBoxContent{
margin:20px;
}
.infoBoxContent button{
background-color: #008CBA;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 16px;
width: 120px;
}
.infoBoxContent h3{
color: white;
}
.infoBoxContent p{
color:white;
}
.infoBoxContent:before {
content: '';
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #333333;
position: absolute;
left: 50%;
top: 100%;
margin-left: -20px;
}
</style>
<body>
<!-- 显示地图 -->
<div id="allmap"></div>
<script type="text/javascript">
// 百度地图API功能初始化地图组件
var map = new BMap.Map("allmap");
var point = new BMap.Point(118.93527, 32.105841);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
//在地图上创建线段
let Polyline1=[{lon:116.399,lat:39.910},{lon:116.405,lat:39.920},{lon:116.425,lat:39.900}];
function Polyline0(item){ //创建折线
let polyline2=[];
for (let i in item) {
polyline2.push(new BMap.Point(item[i].lon, item[i].lat));
}
let polyline3 = new BMap.Polyline(polyline2,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline3);
}
line(Polyline1[0]);
console.log(Polyline1[0])
let i = Polyline1.length-1
line(Polyline1[i]);
function line(list){
var pt = new BMap.Point(list.lon, list.lat)
star(pt)
}
function star(item){
//创建图标
//var pt = new BMap.Point(118.93527, 32.105841);
var myIcon = new BMap.Icon("https://upload.jianshu.io/users/upload_avatars/14350612/7869ea6d-578e-4a1c-a99e-b33b03d3a317?imageMogr2/auto-orient/strip|imageView2/1/w/90/h/90/format/webp", new BMap.Size(30,30));
var marker2 = new BMap.Marker(item,{icon:myIcon}); // 创建标注
map.addOverlay(marker2); // 将标注添加到地图中
//创建文字
var opts = {position : item, offset : new BMap.Size(-30, 15)}
var label = new BMap.Label("欢迎使用", opts);
label.setStyle({
color : "red",
fontSize : "16px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑",
background:"transparent",
border: "0px",
fontWeight:"600"
});
map.addOverlay(label);
}
function end(item){
//创建图标
//var pt = new BMap.Point(118.93527, 32.105841);
var myIcon = new BMap.Icon("https://upload.jianshu.io/users/upload_avatars/14350612/7869ea6d-578e-4a1c-a99e-b33b03d3a317?imageMogr2/auto-orient/strip|imageView2/1/w/90/h/90/format/webp", new BMap.Size(30,30));
var marker2 = new BMap.Marker(item,{icon:myIcon}); // 创建标注
map.addOverlay(marker2); // 将标注添加到地图中
//创建文字
var opts = {position : item, offset : new BMap.Size(-30, 15)}
var label = new BMap.Label("欢迎使用", opts);
label.setStyle({
color : "red",
fontSize : "16px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑",
background:"transparent",
border: "0px",
fontWeight:"600"
});
map.addOverlay(label);
}
</script>
<style>
.alert-main{
width: 200px;
height: 200px;
overflow: hidden;
background: #f5f5f5;
}
</style>
</body>
</html>
网友评论