百度地图

最新推荐文章于 2024-07-20 14:29:31 发布

派大星1

最新推荐文章于 2024-07-20 14:29:31 发布

阅读量147

点赞数

本文链接：https://blog.csdn.net/yin_you_yu/article/details/80680029

版权

 
  <!DOCTYPE html 
  > 
 
  < 
  html 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
  charset= 
  "utf-8" 
  /> 
 
  < 
  title 
  >异步加载 
  </ 
  title 
  > 
 
  </ 
  head 
  > 
 
  < 
  script 
  type= 
  "text/javascript" 
  > 
 
  var script = document.createElement( 
  "script"); 
 
   console.log(script) 
 
   script.src = 
  "http://api.map.baidu.com/api?v=2.0&ak=NkfsjESR7C662gefg8H2mLULt92qyVQE&callback=initialize"; 
 
   document.head.appendChild(script) 
 
   window.onload = 
  function(){ 
 
  var map = 
  new BMap.Map( 
  "container"); 
 
   map.enableScrollWheelZoom( 
  true); 
  //开启鼠标滚轮缩放 
 
  var points = 
  new BMap.Point( 
  116.404, 
  39.915); 
 
   map.centerAndZoom(points, 
  15); 
 
  var marker = 
  new BMap.Marker(points); 
  // 创建标注  
 
   map.addOverlay(marker); 
  // 将标注添加到地图中  
 
   marker.addEventListener( 
  "click", 
  function(){ 
 
  // alert("您点击了标注");  
 
   map.openInfoWindow(infoWindow, map.getCenter()); 
 
   }); 
 
  var opts = { 
 
   width : 
  250, 
  // 信息窗口宽度  
 
   height: 
  100, 
  // 信息窗口高度  
 
   title : 
  "Hello", 
  // 信息窗口标题  
 
   } 
 
  var infoWindow = 
  new BMap.InfoWindow( 
  "<div style='color:red'>sdsd</div>", opts); 
  // 创建信息窗口对象  
 
   map.openInfoWindow(infoWindow, map.getCenter()); 
  // 打开信息窗口 
 
   map.addControl( 
  new BMap.NavigationControl()); 
 
   map.addControl( 
  new BMap.ScaleControl()); 
 
   map.addControl( 
  new BMap.OverviewMapControl()); 
 
   map.addControl( 
  new BMap.MapTypeControl()); 
 
   map.setCurrentCity( 
  "北京"); 
 
   } 
 
  < 
  / 
  script 
  > 
 
  < 
  style 
  type= 
  "text/css" 
  > 
 
  html{ 
  height: 
  100%} 
 
  body{ 
  height: 
  100%; 
  margin: 
  0px; 
  padding: 
  0px} 
 
  #container{ 
  height: 
  100%} 
 
  < 
  / 
  style 
  > 
 
  < 
  body 
  > 
 
  < 
  div 
  id= 
  "container" 
  ></ 
  div 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >