首页 > 其他分享 >页面中插入百度地图(利用百度地图API)

页面中插入百度地图(利用百度地图API)

时间:2022-11-11 11:34:39浏览次数:44  
标签:map m1 地图 info1 API BMap var new 百度


页面中插入百度地图(利用百度地图API)_ico

页面中插入百度地图(利用百度地图API)_asp.net_02

页面中插入百度地图(利用百度地图API)_ico_03

页面中插入百度地图(利用百度地图API)_百度地图_04

页面中插入百度地图(利用百度地图API)_ico_05

页面中插入百度地图(利用百度地图API)_ico_06

页面中插入百度地图(利用百度地图API)_javascript_07

.aspx代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="插入地图.aspx.cs" Inherits="插入地图" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=NOraeOytceNxSBgQ7pY9qbrl"> </script>


</head>
<body>
<form id="form1" runat="server">
<div>

<div id="div_baiduMap" style="height:600px; width:600px; border:1px solid silver; "></div>
<script type="text/javascript">


var map = new BMap.Map("div_baiduMap");
map.centerAndZoom(new BMap.Point(116.321565, 39.979607), 11);

//0.控件设置
//平移缩放
map.addControl(new BMap.NavigationControl());
//鼠标滚轮放大缩小
map.enableScrollWheelZoom();
//...


//1.添加点击侦听
// map.addEventListener("click", function (e) {
// alert(e.point.lng + "," + e.point.lat);
// });


//2. 添加静态标识
var _p = new BMap.Point(116.321565, 39.979607);
var _m1 = new BMap.Marker(_p);
map.addOverlay(_m1);


//3. 动画
_m1.setAnimation(BMAP_ANIMATION_BOUNCE);


//4.弹出窗口
var _info1 = new BMap.InfoWindow("易美逊总部");
_m1.addEventListener("mouseover", function () { this.openInfoWindow(_info1); });
_m1.addEventListener("mouseout", function () { this.closeInfoWindow(_info1); });


//5. 标签提示
// var _opts = { position: _p, offset: new BMap.Size(25, -10) }
// var _lab = new BMap.Label("公司总部", _opts);
// map.addOverlay(_lab);
// _lab.setStyle({ color: "orange", fontSize: "14px", padding: "6px" });


//6. 自定义标识
// var _icon = new BMap.Icon("../App_imgs/LOGO40.png", new BMap.Size(40, 40));
// var _m2 = new BMap.Marker(_p, { icon: _icon });
// map.addOverlay(_m2);


</script>
</div>


</form>
</body>
</html>

效果如下:

页面中插入百度地图(利用百度地图API)_asp.net_08

标签:map,m1,地图,info1,API,BMap,var,new,百度
From: https://blog.51cto.com/u_15866446/5843756

相关文章

  • 0:Base API-Java API 实战
    目录​​0.1引言​​​​0.2API的定义和用处​​​​0.3Scanner(普通类)​​​​0.4Number(包装类)​​​​0.5Math(工具类)​​​​0.6Random(父子类)​​​​0.7ThreadLoca......
  • 1:Unit test and main function-Java API 实战
    目录​​1.抛出企业问题,脱离main测试,模块化编程​​​​2.Junit单元测试的含义和用途​​​​3.怎么获取各种Jar包?MavenRepository获取各类各个版本的jar,这就是仓库。......
  • 4:File-Java API 实战
    目录​​1.引言​​​​2.绝对路径和相对路径?先学送快递吧!​​​​3.绝对路径​​​​4.相对路径​​​​5.File类​​​​6.Linux上的绝对路径有所不同​​1.引言文......
  • agv 地图 新 2022年11月11日08:45:44
    {"header":{"mapType":"2D-Map","mapName":"20221103161325514","minPos":{"x":-43.899,"y":-12.276......
  • 让百度搜索到自己的csdn博客
    最近每天都在写博客,可是发现去搜索自己的博客时,总是搜不到,后来上网查了查,发现可以自己主动提交博客网址以加快被收录,提交最好把每篇的博客地址都给提交一下,百度这个每天......
  • 工作篇 之 解决谷歌地图与 NestedScrollView 滑动冲突
    LZ-Says:情不知往矣,一往情深。前言话说,前段时间被地图虐个半死,那酸爽程度,简直无与伦比。一会儿,要翻墙;一会儿,网络不稳定,白屏了;一会儿,某些设备不支持GMS服务了。怎一个无......
  • api-config.yml
    1api:2apiList:3-name:"超期发未收"4id:overdue_not_received5url:https://apigw.huawei.com/api/data-subject/app_000000035085/D......
  • ApiTemplate
    1packagecom.-.it.regioc.bean.apiconfig;23importlombok.Data;45/**6*api配置模板7*/8@Data9publicclassApiTemplate{10/**11......
  • ApiContainer
    1packagecom.-.it.regioc.container;23importcn.hutool.core.collection.CollectionUtil;4importcom.huawei.it.regioc.bean.apiconfig.ApiTemplate;5i......
  • Day07.1:JavaDoc生成API文档
    JavaDocJavaDoc命令是用来生成自身API文档的API在线文档打开类名所在文件位置打开命令行3.输入命令行并运行4.在类名文件处生成了很多html文件,找到index.htm......