网页显示百度地图 Jquery
cshtml:
<div class="modal" style="visibility: hidden">
<div id="map"></div>
</div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6713c5e605ec1fdcfbe108513da6cf49"></script>
Jquery:
var map = new BMap.Map('map'), form = $('.form');
map.enableContinuousZoom();
map.enableKeyboard();
map.enableInertialDragging();
map.enableScrollWheelZoom();//启动鼠标滚轮放大缩小地图
map.addControl(new BMap.MapTypeControl());//添加地图类型控件,默认为地图右上方
map.addControl(new BMap.OverviewMapControl());//添加缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。
map.addControl(new BMap.ScaleControl());//添加比例尺控件,默认位于地图左下方,显示地图的比例关系。
map.addControl(new BMap.NavigationControl());//添加地图平移缩放控件,PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能。移动端提供缩放控件,默认位于地图右下方。
var dealerID = $('input[name="Dealer"]'), dealerDisplay = $('#dealerDisplay');
//获取全部维修站信息
function select(id, name) {
dealerID.val(id);
dealerDisplay.val(name);
$('.modal').click();
}
$.get('dealers.aspx', function (dealers) {
dealers = eval(dealers);
for (var i = 0; i < dealers.length; i++) {
var dealer = dealers[i];
//若为已存在订单,显示已选择的维修站名称
if (dealerID.val() && dealerID.val() == dealer.ID) {
dealerDisplay.val(dealer.Name);
}
//初始化地图标注点
marker = new BMap.Marker(new BMap.Point(dealer.Longitude, dealer.Latitude));
//初始标注点化信息窗口
info = new BMap.InfoWindow("<h2>" + dealer.Name + "</h2><p>地址:" + dealer.Address + "<br/>未确认:" + dealer.Unaccepted + "    维修中:" + dealer.Uncompleted + "<br/><a style=\"float:right\" name=\"select\" href=\"javascript:select('" + dealer.ID + "','" + dealer.Name + "')\">选择</a></p>");
marker.infoWindow = info;
//添加标注点事件,即点击标注点,即打开该标注点的信息窗口
marker.addEventListener('click', function (e) {
this.openInfoWindow(e.target.infoWindow);
})
map.addOverlay(marker);//添加标注点
}
});
网页显示百度地图 Jquery的更多相关文章
- 在iOS APP中使用H5显示百度地图时如何支持HTTPS?
现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...
- 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤
在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...
- Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图
标签: Android百度地图API Key 分类: Android 百度地图开发(2) 最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地 ...
- openlayers3应用一:显示百度地图
在项目中使用百度地图,最直接的方式是使用百度api,但是使用百度api需要申请key,并且某些功能调用有次数限制. 本文讲述在openlayers3中使用百度地图的方法.调用百度地图,也是经过了几番周 ...
- PC端网页嵌入百度地图
1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文件 参考网址:https ...
- C#显示百度地图API
http://dev.baidu.com/wiki/static/map/API/examples/?v=1.3&2_0#2&0 太原市的经纬度:112.596, 37.884 北京市 ...
- 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法
原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...
- Android开发百度地图(一)--显示基本地图
最近由于比赛的需要,自己学习了一下百度地图的开发.希望以下的内容能够对大家有用. 一.开发前的准备工作: 1.注册百度账号,并登录.(有百度账号的话直接登录) 2.申请Key,地址:http://de ...
- Angular/Vue调用百度地图+标注点不显示图标+多标注点计算地图中心位置
整理一下~ 一.在vue中调用百度地图 首先当然是申请百度密匙(很简单,不多说) 1.在index.html文件中引入百度地图JavaScript API接口: <script type=& ...
随机推荐
- 20155310《Java程序设计》实验五(网络编程与安全)实验报告
20155310<Java程序设计>实验五(网络编程与安全)实验报告 一.实验内容及步骤 •任务一: 编写MyBC.java实现中缀表达式转后缀表达式的功能 编写MyDC.java实现从上 ...
- 20155320 2016-2017-3 《Java程序设计》第三周学习总结
20155320 2016-2017-3 <Java程序设计>第三周学习总结 教材学习内容总结 定义类 步骤: 在程序中定义类 使用new关键词新建一个对象 声明参考名称,并将名称参考至新 ...
- 20155332 2016-2017-2《Java程序设计》课程总结
20155332 2016-2017-2<Java程序设计>课程总结 1.每周作业链接汇总 2.博客之最 3.实验链接汇总 博客链接汇总 预备作业1:那些年陪伴我的老师+我期待的师生关系 ...
- 20145207《Java程序设计》实验二(Java面向对象程序设计)实验报告
<Java程序设计>实验二(Java面向对象程序设计)实验报告 目录 改变 Java面向对象程序设计实验要求 实验成果 课后思考 改变 看了下之前实验二的整体,很搞笑,大图+代码,没了.. ...
- 20145226夏艺华 《Java程序设计》实验报告四
实验四 Android开发基础 实验内容 基于Android Studio开发简单的Android应用并部署测试 了解Android组件.布局管理器的使用 掌握Android中事件处理机制 Andro ...
- springboot 中controller 返回html界面或 jsp界面
参考链接:https://blog.csdn.net/qq_15260315/article/details/80907056 经尝试,返回html界面没问题,但是返回jsp界面是有问题的,just ...
- 我们一起学习WCF 第二篇WCF承载多个接口
前言:现在王大叔养了大批猪,赚了很多钱.但是最近发现养鸡也可以赚很多钱,他就像扩展业务开始养鸡.又过两年他发现市场对狗的需求量很大,他开始养狗.那么他改怎么做呢,不可能去修改猪住的地方把鸭子和狗放里面 ...
- Vue 编程之路(一)——父子组件之间的数据传递
最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型.其中部分页面是数据管理页,所以有很多可以复用的表格,故引入自定义组件.在这里分享一下开 ...
- leetcode-下一个排列
下一个排列 实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列). 必须原地修改,只允许使用额外 ...
- 《图解 HTTP 》阅读 —— 第三章
第3章 HTTP 报文内的 HTTP 信息 用于 HTTP 协议交互的信息称为 HTTP 报文:请求报文和响应报文 HTTP 在传输数据时通过编码可以提升速率,能有效的处理大量数据,但是会消耗更多的C ...