百度地图

最新推荐文章于 2023-02-16 23:49:48 发布

Mature blame

最新推荐文章于 2023-02-16 23:49:48 发布

阅读量147

点赞数

分类专栏：前端文章标签：百度地图的实现

本文链接：https://blog.csdn.net/weixin_42390534/article/details/89633332

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

百度地图

基本的实现

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的申请的key">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("container");
// 创建点坐标
var point = new BMap.Point(113.269906, 23.135667);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, );
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
//  添加控件
var o = {type: BMAP_NAVIGATION_CONTROL_SMALL}
map.addControl(new BMap.NavigationControl(o));
//  地图类型
map.addControl(new BMap.MapTypeControl());
var opts = {offset: new BMap.Size(150, 5)}
map.addControl(new BMap.ScaleControl(opts));
map.addControl(new BMap.OverviewMapControl());
map.setCurrentCity("广州");
 //设置地图样式
// var mapStyle={  style : "midnight" }
// map.setMapStyle(mapStyle);
//在地图上绘制
//  设置海量点
var points=[new BMap.Point(113.270, 23.135),new BMap.Point(113.270,71.142),new BMap.Point(113.330803,23.111338)];
var marker = new BMap.PointCollection(points);        // 创建标注
var options = {
            size: BMAP_POINT_SIZE_BIG,
            shape: BMAP_POINT_SHAPE_STAR,
            color: '#d340c3'
        }
marker.setStyles(options);
map.addOverlay(marker);

function addMarker(point, index){  // 创建图标对象
    var myIcon = new BMap.Icon("C:\Users\PC\Desktop\markers.png", new BMap.Size(23, 25), {
        // 指定定位位置。
        // 当标注显示在地图上时，其所指向的地理位置距离图标左上
        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
        // 图标中央下端的尖角位置。
        anchor: new BMap.Size(10, 25),
        // 设置图片偏移。
        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
        // 需要指定大图的偏移位置，此做法与css sprites技术类似。
        imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移
    });
    // 创建标注对象并添加到地图
    var marker = new BMap.Marker(point, {icon: myIcon});
    map.addOverlay(marker);
}
// 随机向地图添加10个标注
var bounds = map.getBounds();
var lngSpan = bounds.maxX - bounds.minX;
var latSpan = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i ++) {
    var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),
                                  bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));
    addMarker(point, i);
}
marker.addEventListener("click", function(){
    alert("您点击了标注");
});
marker.addEventListener("dragend", function(e){
    alert("当前位置：" + e.point.lng + ", " + e.point.lat);
})


// 初始化地图，设置中心点坐标和地图级别
var tilelayer = new BMap.TileLayer();         // 创建地图层实例
tilelayer.getTilesUrl=function(){             // 设置图块路径
    return "layer.gif";
};
map.addTileLayer(tilelayer);
</script>
</body>
</html>

海量点的实现和弹出层

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <style type="text/css">
    html,body{
        margin:0;
        width:100%;
        height:100%;
        background:#ffffff;
    }
    #map{
        width:100%;
        height:50%;
    }

  </style>
	<script src="jquery-3.4.0.min.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请的key"></script>
  <script type="text/javascript" src="http://lbsyun.baidu.com/jsdemo/data/points-sample-data.js"></script>
</head>
<body>
    <div id="map"></div>
		  <div id="ss" style="width:200px;height:200px;background:red;  position: absolute;left:0px;top:0;display:none"></div>
    <script type="text/javascript">
    var map = new BMap.Map("map", {});                        // 创建Map实例
    map.centerAndZoom(new BMap.Point(105.000, 38.000), 5);     // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom();




		                    //启用滚轮放大缩小
    if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
        var points = [];  // 添加海量点数据
				var options={};

				var dataList=[];
				var marker=new Array();
        for (var i = 0; i < data.data.length; i++) {

          points.push(new BMap.Point(data.data[i][0], data.data[i][1]));

        }

				map.addEventListener("zoomend",function(e){
						console.log(e);

						if(map.getZoom()>8){
							map.clearOverlays();
								options={
									size: BMAP_POINT_SIZE_HUGE,
			            shape: BMAP_POINT_SHAPE_CIRCLE,
			            color: '#d340c3'
								}
								  var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection

										pointCollection.addEventListener("click",function(){
												// this.openInfoWindow("<p style=’font-size:12px;lineheight:1.8em;’></br>地址：</br> 电话：</br> 详情...：</br></p>");
												$("#ss").css("display","block")

										})



								 map.addOverlay(pointCollection);  // 添加Overlay
						}else{
							map.clearOverlays();
							options = {
								 size: BMAP_POINT_SIZE_TINY,
								 shape: BMAP_POINT_SHAPE_CIRCLE,
								 color: '#d340c3'
						 }


						}
						  var pointCollection = new BMap.PointCollection(points, options);
							 map.addOverlay(pointCollection);  //
				});
    }


  </script>
</body>
</html>

弹出层我是用div 实现的

Mature blame

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图

百度地图基本的实现<!DOCTYPE html><html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=u...
复制链接

扫一扫