整个流程参照:
http://blog.csdn.net/lizuqingblog/article/details/18357721?utm_source=tuicool&utm_medium=referral
但是,参照该博客做出来的效果,无法显示地图。
查阅官方demo,修改了其中的一个参数:
<div id="container"></div>
var map = new BMap.Map("container");
即将allmap改为container,额。。。。。不懂JavaScript,不知道这参数什么意思。
详细的html代码如下(还有部分地方进行了小修改):
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>MyMap</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yunSkctp3o2aAodRCGvZU1CbfxgG86Sz"> </script> </head> <body> <div id="container"></div> <script type="text/javascript"> // °ٶȵٍ¼API¹¦Ŝ var map = new BMap.Map("container"); var m_city = new BMap.Point(116.404,39.915); map.centerAndZoom(m_city, 13); var m_radius = 1000; var m_point; map.addEventListener("click",function(e){ var circle = new BMap.Circle(e.point,m_radius); map.clearOverlays(); map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 map.addOverlay(circle); m_point = e.point; alert(e.point.lng + "," + e.point.lat); }); function SetCity(city){ //ʨ׃³ȊϪsº¯˽ m_city = city; } setTimeout(function(){ //500msº