首页 > 其他分享 >百度地图让标注显示在最佳视野里

百度地图让标注显示在最佳视野里

时间:2023-03-02 13:32:56浏览次数:37  
标签:map addOverlay points BMap 百度 var new 视野 标注


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自动调整视野</title>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
</head>
<body>
<div style="width:800px;height:400px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); //地图容器

var points = [ //创建7个点
new BMap.Point(116.401801,39.912114),
new BMap.Point(116.402802,39.912225),
new BMap.Point(116.403803,39.912336),
new BMap.Point(116.404804,39.912447),
new BMap.Point(116.405805,39.912558),
new BMap.Point(116.406806,39.912669),
new BMap.Point(116.407804,39.912123)
];
var marker1 = new BMap.Marker(points[0]); //创建7个标注
var marker2 = new BMap.Marker(points[1]);
var marker3 = new BMap.Marker(points[2]);
var marker4 = new BMap.Marker(points[3]);
var marker5 = new BMap.Marker(points[4]);
var marker6 = new BMap.Marker(points[5]);
var marker7 = new BMap.Marker(points[6]);
map.addOverlay(marker1); //显示7个标注
map.addOverlay(marker2);
map.addOverlay(marker3);
map.addOverlay(marker4);
map.addOverlay(marker5);
map.addOverlay(marker6);
map.addOverlay(marker7);

map.centerAndZoom(points[6], 16); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); //为地图添加鱼骨

var label = new BMap.Label("点击这个标注,展现7个标注的最佳视野",{position : points[6], offset: new BMap.Size(3,-6)}); //定义一个文字标签,注意1.2请用position
map.addOverlay(label);

marker7.addEventListener("click",function(){ //为marker7添加事件
map.setViewport(points);
});

</script>

 

标签:map,addOverlay,points,BMap,百度,var,new,视野,标注
From: https://blog.51cto.com/u_4427045/6096032

相关文章

  • Android百度地图添加覆盖物(AndroidSDK_v2.4.1)
     使用网络功能所需权限:<!--使用网络功能所需权限--><uses-permissionandroid:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission><uses-permission......
  • 利用百度地图api解析地址的地理坐标
    1、封装一个js文件//bmpgl.jsexportfunctionBMPGL(ak){//ak为百度地图api申请应用后获得returnnewPromise(function(resolve,reject){window.init......
  • CAD拉伸后标注尺寸不变?快来看看是不是这个原因!
    CAD拉伸命令作为常用的图形编辑命令之一,有些设计师在使用过程中发现,CAD拉伸后标注尺寸没有变化,这是什么情况?本节课程小编就以浩辰CAD软件为例来给大家分享一下CAD拉伸后标......
  • 百度前端一面高频vue面试题汇总
    什么是递归组件?举个例子说明下?分析递归组件我们用的比较少,但是在Tree、Menu这类组件中会被用到。体验组件通过组件名称引用它自己,这种情况就是递归组件<template><......
  • 百度地图的API接口
     API接口API:应用程序接口(API:ApplicationProgramInterface)python为了在团队内部形成共识、防止个人习惯差异引起的混乱,我们需要找到一种大家都觉得很好的接口实现规......
  • C# 多个矩形围成的多边形标注位置的问题
    如下图1,需要对各小块进行序号标注。如果按组合多边形的方式,则会出现图2的情况,序号不在块内或排列不美观。如图2,序号不在合适的美观位置。这种如何将带圈的序号绘制成如上图......
  • 实现百度下拉菜单实例(利用jsonp跨域请求百度数据接口)
    JSONP:是JSON withpadding(填充式JSON或参数式JSON)的简写,它由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指定......
  • 我做的百度飞桨PaddleOCR .NET调用库
    我做的百度飞桨PaddleOCR.NET调用库 我做的百度飞桨PaddleOCR.NET调用库.NETConf2021中国我做了一次《.NET玩转计算机视觉OpenCV》的分享,其中提到了一个效果特别......
  • 如何在dokuwiki里面集成百度的开源富文本编辑器ueditor
    ​ 这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java"......
  • 如何不顾百度的拦截,抓取百度搜索结果
    如果你使用requests模块去抓取百度搜索结果,你现在是抓取不到的,你只能抓取到【百度安全验证】页。代码:importrequests#导入request包url="https://www.baidu.com/s?......