js获取地图展示功能

Myth丶恋晨 2023-10-08 12:37 57阅读 0赞

<script type="text/javascript">
    
    			    // 百度地图API功能
    			    var map = new BMap.Map("map");    // 创建Map实例
    			    var point = new BMap.Point(116.257172,40.123649);   //坐标拾取网址：http://api.map.baidu.com/lbsapi/getpoint/index.html
    			
    			    var marker = new BMap.Marker(point);  // 创建标注
    			    var mapStyle = {
        style:"dark"};
        			map.setMapStyle(mapStyle);
    
    			    var top_left_control = new BMap.ScaleControl({
        anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    			    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    			
    			    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    			    map.centerAndZoom(point, 18);  // 初始化地图,设置中心点坐标和地图级别
    			    map.addOverlay(marker);               // 将标注添加到地图中
    			    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    			    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    			    map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    				
    			
    			
    			    window.onresize = function(){
        
    			
    			        map.centerAndZoom(point, 15);  // 重置窗口的时候 重新获取中心点坐标的位置
    			
    			    }
    
    		    map.addControl(top_left_control);
    		    map.addControl(top_left_navigation);
    		    /*map.addControl(top_right_navigation);  */
    			</script>
    	</div>

需要使用到以下包  
![在这里插入图片描述][20201203171300461.png_pic_center]

### 收藏加关注，再来不迷路！！！ ###

[20201203171300461.png_pic_center]: https://img-blog.csdnimg.cn/20201203171300461.png#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，57人围观）

还没有评论，来说两句吧...

相关阅读

相关 js获取地图展示功能

<script type="text/javascript"> // 百度地图API功能 var map = ne

Myth丶恋晨/ 2023年10月08日 12:37/ 0 赞/ 58 阅读

相关使用Echarts实现地图展示

首先来看下效果 ![在这里插入图片描述][9c6a3385b1ae476aa23e9113b81283b9.png] 实现其实也简单，创建一个组件 <temp

╰半夏微凉°/ 2023年10月04日 20:24/ 0 赞/ 73 阅读

相关获取百度地图定位功能的API

转载自：[http://www.cnhonkerarmy.com/forum.php?mod=viewthread&tid=237777][http_www.cnhonkera

朱雀/ 2023年06月08日 06:45/ 0 赞/ 351 阅读

相关 Python:folium地图标记icon分组展示

python代码如下： import webbrowser as wb import folium from folium import Featur

╰半橙微兮°/ 2022年12月25日 08:59/ 0 赞/ 210 阅读

相关 JS_js腾讯地图通过详细地址获取经纬度

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=腾讯地图key"></script>

「爱情、让人受尽委屈。」/ 2022年11月03日 00:58/ 0 赞/ 51 阅读

相关 echarts3 + 百度地图API展示自定义地图

　之前一篇echarts+百度地图API实现自定义底图后，这次测试提出了bug：地图上的点可点击，弹出地点信息。于是开始研究如何去掉底图可点的功能。上网搜索无果后，还是自己研究

电玩女神/ 2022年06月10日 10:10/ 0 赞/ 540 阅读

相关 echarts 地图数据展示

<div class='col' id="map-wrap" style=' height: 280px;'></div> <script type="

野性酷女/ 2022年03月26日 02:22/ 0 赞/ 388 阅读

相关其他地图坐标点在百度地图展示位置偏差较大--js开发百度地图服务类-Convertor

做所有操作之前，应先引入百度地图开发的js文件 <script type="text/javascript" src="http://

女爷i/ 2021年11月17日 00:36/ 0 赞/ 368 阅读

相关获取百度地图

一.获取百度地图 ![20170713152245042][] 需要调用百度的js <script type="text/javascript" src="http

本是古典何须时尚/ 2021年09月13日 14:48/ 0 赞/ 848 阅读

相关 vue中展示mapbox地图

1，vue中安装mapbox cnpm i mapbox-gl -S 2,main.js中引入 import mapBoxGl from 'mapbox-

妖狐艹你老母/ 2021年07月25日 13:48/ 0 赞/ 1158 阅读