<script type="text/javascript">
   //json数组
   var jsonArray =document.getElementById("restaurant").value;
   var map = new BMap.Map("milkMap"); // 创建地图实例
   <c:forEach items="${restaurantlist}" var="Restaurant" varStatus="j">
   var point = new BMap.Point(<c:out value="${Restaurant.longitude}"/>,<c:out value="${Restaurant.latitude}"/>); // 创建点坐标
    map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
      var marker = new BMap.Marker(point); // 创建标注
       map.addOverlay(marker);// 将标注添加到地图中

var sContent="<div id="+${j.count}+" style='line-height:1.8em;font-size:12px;'>" +
       "<b>地址:</b>"+"${Restaurant.areaInfo}"+"</br>" +
         "<b>电话:</b>"+"${Restaurant.tel}"+"</br>" +
       "<b>口碑:</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a>" +
        "</div>";
   //alert(${j.count});    
   var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
       marker.addEventListener("click", function(){ //给标注添加点击事件
   this.openInfoWindow(infoWindow);
   //alert(sContent);
   marker.addEventListener("mouseover", function () { this.openInfoWindow(infoWindow, map.getCenter()); });});
   </c:forEach>

initMap();//创建和初始化地图
  function initMap() {
   setMapEvent();//设置地图事件
   addMapControl();//向地图添加控件
  }

//地图事件设置函数:
  function setMapEvent() {
   map.enableDragging();//启用地图拖拽事件
   map.enableScrollWheelZoom();//启用地图滚轮放大缩小
   map.disableDoubleClickZoom();//禁用鼠标双击放大
   map.disableKeyboard();//禁用键盘上下左右键移动地图,默认禁用(可不写)
  }

//地图控件添加函数:
  function addMapControl() {
    //向地图中添加缩放控件
    var ctrl_nav = new BMap.NavigationControl( {
    anchor : BMAP_ANCHOR_TOP_LEFT,
    type : BMAP_NAVIGATION_CONTROL_LARGE
   });
   
  map.addControl(ctrl_nav);
  
  //向地图中添加缩略图控件
  var ctrl_ove = new BMap.OverviewMapControl( {
   anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
   isOpen : 1
  });

map.addControl(ctrl_ove);
  //向地图中添加比例尺控件
  var ctrl_sca = new BMap.ScaleControl( {
   anchor : BMAP_ANCHOR_BOTTOM_LEFT
  });

map.addControl(ctrl_sca);

}

</script>

js中调用C标签实现百度地图相关推荐

  1. qt百度地图html,Qt的QWebChannel和JS、HTML通信/交互驱动百度地图

    Qt的QWebChannel和JS.HTML通信/交互驱动百度地图 0 前言 我一个研究嵌入式的,不知道怎么就迷上了上位机,接了几个项目都是关于Qt,这个项目还是比较经典的,自己没事儿的时候也进行研究 ...

  2. 基于JDBC从数据库中读取数据,在百度地图批量标注地点

    基于JDBC从数据库中读取数据,在百度地图批量标注地点 一.相关技术 JSP,JDBC,JSON,JS,百度地图API 二.基于JDBC从数据库读取数据 见"JSP基于JDBC操作MSSQL ...

  3. JS中调用本地Winform程序并传递参数

    场景 JS中调用本地exe程序: JS中调用本地exe程序_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上怎样在js中调用本地winform程序并且传递参数. 注: 博客: ...

  4. SpringMVC中通过@ResponseBody返回对象,Js中调用@ResponseBody返回值,统计剩余评论字数的js,@RequestParam默认值,@PathVariable的用法

    1.SpringMVC中通过@ResponseBody返回对象,作为JQuery中的ajax返回值 package com.kuman.cartoon.controller; import java. ...

  5. Cookie操作以及如何在js中调用jsp变量

    存Cookie Cookie idCookie = new Cookie("userId", request.getParameter("id"));Cooki ...

  6. 在vue.js中实现a标签href tel的打电话功能

    在vue.js中实现a标签href tel的打电话功能 div v-for="p in persons"> <p> name: {{ p.name }} < ...

  7. 在js中调用微信的扫描二维码功能

    在js中调用微信的扫描二维码功能* 关键代码 <html> <head>`在这里插入代码片`<title>js调用微信扫一扫功能测试</title>&l ...

  8. 百度地图API快速调用,一键生成百度地图

    对于在网站或者网页之内插入百度地图插件,可能很多编程技术人员都知道如何来做,但是做起来所花费的时间都比较长,那么下面跟大家分享一下如何快速调用百度地图API,一件生成百度地图的方法,这种方法适用于任何 ...

  9. js中使用shiro标签的一个小坑

    在jsp页面中使用shiro标签很简单 <shiro:haspermission name="你的权限"> 你的标签 </shiro:haspermission& ...

最新文章

  1. 【原创】DevExpress控件GridControl中的布局详解
  2. 我的世界服务器无限小号,我的世界惊现全新无限刷物品bug 服主大大都要注意了...
  3. OpenGL绘制Triangle三角形
  4. 【图像处理】——遍历图像所有像素的方法(for 循环和np.where遍历)应用在模板制作
  5. P1169-[ZJOI2007]棋盘制作【贪心】
  6. IE6/IE7/Firefox浏览器不兼容原因及解决办法
  7. 轻量级java web实践-6(框架源码-4)
  8. r语言之散点图类型type参数
  9. 任务方案思考:文本分类篇
  10. 国内物联网平台初探(五) ——机智云IoT物联网云服务平台及智能硬件自助开发平台...
  11. 【论文笔记】Rich feature hierarchies for accurate object detection and semantic segmentation
  12. 【AI简报20211203期】国产GPU全面开花!黑芝麻智能与RT-Thread达成战略合作
  13. Android免费地图应用网址
  14. web前端程序员两年学习经验与总结
  15. [深度学习概念]·非极大值抑制解析
  16. oracle 中平铺函数,oracle spatial
  17. Js中的this和window.event.srcElement
  18. 黑磷量子点/铂杂化介孔二氧化硅纳米颗粒/负载黑磷量子点红细胞膜纳米囊泡BPQD-EMNVs的应用
  19. 基于against pose noise的V2V协同感知(3D Detection, Motion Forecasting)
  20. 敬业签苹果ios手机便签APP里的录音怎么转文字?

热门文章

  1. linux ssh服务端下载文件,Linux SSH服务端配置文件设置
  2. python实现链表的删除_Python垃圾回收机制
  3. 51单片机数字钟的实现
  4. 个人代码库の自定义后缀名
  5. Markdown 基础学习
  6. react项目在ie空白解决
  7. jdk1.6 改 jdk1.7或jdk1.8(改回也可以)(图文详解)
  8. jquery.validate.unobtrusive的使用
  9. 【转载】性能测试浅谈
  10. WCF - 服务实例管理模式