百度地图插件

最新推荐文章于 2023-06-28 18:04:57 发布
最新推荐文章于 2023-06-28 18:04:57 发布
阅读量4.8k 收藏 2
点赞数 3
分类专栏： 插件 html 文章标签： 百度地图 插件
html 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
插件
2 篇文章 0 订阅
订阅专栏

百度地图插件

最近碰到需要使用百度地图,可是不是很会哎,怎么办..  没办法,无奈之下只有找度娘,偶然间发现一个比较不错的地图插件,现在分享给大家,需要的复制过去使用,使用地图前,请先连上网络..

使用地图之前,需要一个百度地图的插件,下面将插件的内容  发给大家: 
//先要加载接口，要在函数外，保证先加载
document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A739765f9a84bee561d30fa0b537ccb9"></script>');
document.write('<script charset=utf-8 type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>');
document.write('<link charset=utf-8 rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />');
var bdMapDestination; //全局终点位置


//显示地图
//参数：显示容器ID，属性(city,addr,title,lawfirm,tel,user,mapx,pic,ismove,piobj,zoom)
function ShowMap(objname,options){
<span style="white-space:pre">	</span>if(options){
<span style="white-space:pre">		</span>this._city = options.city ? options.city : ""; //城市
<span style="white-space:pre">		</span>this._addr = options.addr ? options.addr : ""; //地址
<span style="white-space:pre">		</span>this._title = options.title ? options.title : ""; //信息窗口标题
<span style="white-space:pre">		</span>this._lawfirm = options.lawfirm ? options.lawfirm : ""; //律所
<span style="white-space:pre">		</span>this._tel = options.tel ? options.tel : ""; //电话
<span style="white-space:pre">		</span>this._user = options.user ? options.user : ""; //主任
<span style="white-space:pre">		</span>this._mapx = options.mapx ? options.mapx : ""; //地图坐标
<span style="white-space:pre">		</span>this._pic = options.pic ? options.pic : ""; //图片
<span style="white-space:pre">		</span>this._ismove = options.ismove ? options.ismove : "0"; //是否拖动，1为拖动为设置标注，0为显示。默认0
<span style="white-space:pre">		</span>this._piobj = options.piobj ? options.piobj : ""; //接收拖动坐标的表单ID
<span style="white-space:pre">		</span>this._zoom = options.zoom ? options.zoom : "14"; //放大级别，默认14
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>//设定初始坐标
<span style="white-space:pre">	</span>var point=new BMap.Point(113.63156,34.83794);
<span style="white-space:pre">	</span>//范围为3-18级
<span style="white-space:pre">	</span>var zoom=parseInt(this._zoom); //要转为数字


<span style="white-space:pre">	</span>//创建地图
<span style="white-space:pre">	</span>var map = new BMap.Map(objname);
<span style="white-space:pre">	</span>map.enableScrollWheelZoom();
<span style="white-space:pre">	</span>map.centerAndZoom(point, zoom);//设初始化地图。


<span style="white-space:pre">	</span>//向地图中添加缩略图控件
<span style="white-space:pre">	</span>var ctrlOve = new BMap.OverviewMapControl({
<span style="white-space:pre">		</span>anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
<span style="white-space:pre">		</span>isOpen: 1
<span style="white-space:pre">	</span>});
<span style="white-space:pre">	</span>map.addControl(ctrlOve);


<span style="white-space:pre">	</span>//设置版权控件位置
<span style="white-space:pre">	</span>var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_LEFT});
<span style="white-space:pre">	</span>map.addControl(cr); //添加版权控件
<span style="white-space:pre">	</span>var bs = map.getBounds(); //返回地图可视区域
<span style="white-space:pre">	</span>cr.addCopyright({id: 1, content: "<a href='http://blog.csdn.net/love_xiolan/article/details/52711874' style='font-size:12px;'>全屏动画背景</a>", bounds: bs});


<span style="white-space:pre">	</span>//坐标不为空时按坐标显示
<span style="white-space:pre">	</span>if (this._mapx != ""){
<span style="white-space:pre">		</span>var mx=this._mapx.substr(0,this._mapx.indexOf(","));
<span style="white-space:pre">		</span>var my=this._mapx.substr(this._mapx.indexOf(",")+1);
<span style="white-space:pre">		</span>point=new BMap.Point(mx,my);
<span style="white-space:pre">		</span>map.centerAndZoom(point, zoom); //重新调整位置
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>//否则按地址显示
<span style="white-space:pre">	</span>else if (this._addr != ""){
<span style="white-space:pre">		</span>//创建地址解析器实例   
<span style="white-space:pre">		</span>var myGeo = new BMap.Geocoder();    
<span style="white-space:pre">		</span>//将地址解析结果显示在地图上，并调整地图视野。此过程为异步，所以要重设标注 
<span style="white-space:pre">		</span>myGeo.getPoint(this._addr, function(poi){
<span style="white-space:pre">			</span>map.centerAndZoom(poi, zoom);
<span style="white-space:pre">			</span>marker.setPosition(poi); //重调标注位置
<span style="white-space:pre">			</span>//重设公交查询终点
<span style="white-space:pre">			</span>bdMapDestination="latlng:"+marker.getPosition().lat+","+marker.getPosition().lng+"|name:"+this._lawfirm;
<span style="white-space:pre">		</span>}, this._city);
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>//否则按城市显示
<span style="white-space:pre">	</span>else if (this._city != ""){
<span style="white-space:pre">		</span>map.setCenter(this._city); //设置地图中心点。
<span style="white-space:pre">		</span>//此定位无具体坐标，所以显示模式时要清除标注。要延时处理
<span style="white-space:pre">		</span>if (this._ismove=="0"){setTimeout(function(){map.clearOverlays();}, 1000);}
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>//都为空按IP定位
<span style="white-space:pre">	</span>else{
<span style="white-space:pre">		</span>//创建一个获取本地城市位置的实例
<span style="white-space:pre">		</span>var myCity = new BMap.LocalCity();
<span style="white-space:pre">		</span>//获取城市
<span style="white-space:pre">		</span>myCity.get(function(result){map.setCenter(result.name);});
<span style="white-space:pre">		</span>if (this._ismove=="0"){setTimeout(function(){map.clearOverlays();}, 1000);}
<span style="white-space:pre">	</span>}


<span style="white-space:pre">	</span>//创建标注
<span style="white-space:pre">	</span>var marker = new BMap.Marker(point);
<span style="white-space:pre">	</span>map.addOverlay(marker); // 将标注添加到地图中
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>//设置标注时
<span style="white-space:pre">	</span>if (this._ismove=="1"){
<span style="white-space:pre">		</span>marker.enableDragging(); //可拖拽
<span style="white-space:pre">		</span>var label = new BMap.Label("拖拽到您的位置",{offset:new BMap.Size(20,-15)});
<span style="white-space:pre">		</span>label.setStyle({ backgroundColor:"red", color:"white", fontSize : "12px" });
<span style="white-space:pre">		</span>marker.setLabel(label);


<span style="white-space:pre">		</span>var poj=this._piobj; //过程里不支持this，要传给变量
<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>//拖拽设置位置
<span style="white-space:pre">		</span>marker.addEventListener("dragend", function(e){
<span style="white-space:pre">			</span>try{document.getElementById(poj).value = e.point.lng + "," + e.point.lat;}catch (ex) {}
<span style="white-space:pre">		</span>});
<span style="white-space:pre">		</span>//点击设置位置
<span style="white-space:pre">		</span>map.addEventListener("click", function(e){
<span style="white-space:pre">			</span>marker.setPosition(e.point); //重调标注位置
<span style="white-space:pre">			</span>try{document.getElementById(poj).value = e.point.lng + "," + e.point.lat;}catch (ex) {}
<span style="white-space:pre">		</span>});
<span style="white-space:pre">	</span>}


<span style="white-space:pre">	</span>//显示标注时
<span style="white-space:pre">	</span>if (this._ismove=="0"){
<span style="white-space:pre">		</span>//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
<span style="white-space:pre">		</span>bdMapDestination="latlng:"+marker.getPosition().lat+","+marker.getPosition().lng+"|name:"+this._lawfirm;
<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>//显示窗口设置
<span style="white-space:pre">		</span>//var opts = {width:250,height:130,title : "<font color=green size=3>" + this._title + "</font>"} //窗口标题
<span style="white-space:pre">		</span>//var infotxt="<table border='0'><tr><td valign='top'>"; //窗口内容
<span style="white-space:pre">		</span>//if (this._pic != ""){infotxt += "<img src='"+this._pic+"' id='picid' style='padding-right:5px;' width=50>";}
<span style="white-space:pre">		</span>//infotxt += "</td><td style='font-size:12px;line-height:16px;'>";
<span style="white-space:pre">		</span>//if (this._lawfirm !=""){infotxt += "<b>律所：</b>" + this._lawfirm + "<br/>";};
<span style="white-space:pre">		</span>//if (this._addr !=""){infotxt += "<b>地址：</b>" + this._addr + "<br/>";};
<span style="white-space:pre">		</span>//if (this._tel !=""){infotxt += "<b>电话：</b>" + this._tel + "<br/>";};
<span style="white-space:pre">		</span>//if (this._user !=""){infotxt += "<b>主任：</b>" + this._user + "<br/>";};
<span style="white-space:pre">		</span>//infotxt += "</td></tr>";
<span style="white-space:pre">		</span>//infotxt += "<tr><td colspan='2' style='font-size:12px;'>起点：<input type='text' name='region' id='region' style='border:1px #cccccc solid;width:100px;'><input type='hidden' value='"+this._city+"' id='city'> <input type='button' value='公交' οnclick='gotobaidu(1)' style='border:1px #cccccc solid;background:#F8F8F8;'/> <input type='button' value='驾车' οnclick='gotobaidu(2)' style='border:1px #cccccc solid;background:#F8F8F8;'/></td></tr>";
<span style="white-space:pre">		</span>//infotxt += "</table>";


<span style="white-space:pre">		</span>//显示文本标题
<span style="white-space:pre">		</span>var label2 = new BMap.Label(this._title,{offset:new BMap.Size(20,-15)});
<span style="white-space:pre">		</span>label2.setStyle({ backgroundColor:"red", color:"white", fontSize : "12px" });
<span style="white-space:pre">		</span>marker.setLabel(label2);
<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>//searchInfoWindow显示内容
<span style="white-space:pre">		</span>var content = '<div style="margin:0;line-height:20px;padding:2px;">';
<span style="white-space:pre">		</span>if (this._pic != ""){ content += '<img src="' + this._pic + '"style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>'; }
<span style="white-space:pre">		</span>if (this._addr != ""){ content += "地址：" + this._addr + "<br/>"; }
<span style="white-space:pre">		</span>if (this._tel != ""){ content += "电话：" + this._tel + "<br/>"; }
<span style="white-space:pre">		</span>if (this._user != ""){ content += "姓名：" + this._user + "<br/>"; }
<span style="white-space:pre">		</span>if (this._lawfirm !=""){ content += "简介：" + this._lawfirm; }
<span style="white-space:pre">		</span>content += "</div>";


<span style="white-space:pre">		</span>//创建检索信息窗口对象
<span style="white-space:pre">		</span>var searchInfoWindow = null;
<span style="white-space:pre">		</span>searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
<span style="white-space:pre">			</span>title  : this._title,      //标题
<span style="white-space:pre">			</span>width  : 290,             //宽度
<span style="white-space:pre">			</span>//height : 100,              //高度。去掉为自动
<span style="white-space:pre">			</span>panel  : "panel",         //检索结果面板
<span style="white-space:pre">			</span>enableAutoPan : true,     //自动平移
<span style="white-space:pre">			</span>searchTypes   :[
<span style="white-space:pre">				</span>BMAPLIB_TAB_SEARCH,   //周边检索
<span style="white-space:pre">				</span>BMAPLIB_TAB_TO_HERE,  //到这里去
<span style="white-space:pre">				</span>BMAPLIB_TAB_FROM_HERE //从这里出发
<span style="white-space:pre">			</span>]
<span style="white-space:pre">		</span>});


<span style="white-space:pre">		</span>//创建信息窗口。改用searchInfoWindow显示
<span style="white-space:pre">		</span>//var infoWindow = new BMap.InfoWindow(infotxt,opts);
<span style="white-space:pre">		</span>marker.addEventListener("mouseover", function(){
<span style="white-space:pre">			</span>searchInfoWindow.open(marker);
<span style="white-space:pre">		</span>//<span style="white-space:pre">	</span>this.openInfoWindow(infoWindow);
<span style="white-space:pre">			</span>//图片加载完毕重绘infowindow。防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
<span style="white-space:pre">		</span>//<span style="white-space:pre">	</span>document.getElementById('picid').onload = function (){infoWindow.redraw();}
<span style="white-space:pre">		</span>});
<span style="white-space:pre">	</span>}
}


//公交查询
function gotobaidu(k){
<span style="white-space:pre">	</span>var qd=document.getElementById("region");
<span style="white-space:pre">	</span>var zd=bdMapDestination;
<span style="white-space:pre">	</span>var ct=document.getElementById("city").value;
<span style="white-space:pre">	</span>if (qd.value==""){
<span style="white-space:pre">		</span>alert("请输入起点");
<span style="white-space:pre">		</span>qd.focus();
<span style="white-space:pre">		</span>return false;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>if(ct==""){ct="郑州"};
<span style="white-space:pre">	</span>var mode=(k=="1"?"transit":"driving");
<span style="white-space:pre">	</span>var url="http://api.map.baidu.com/direction?output=html&mode="+mode+"&region="+ct+"&origin="+qd.value+"&destination="+zd+"&src=88148|88148.com";
<span style="white-space:pre">	</span>window.open(url);
}


//获取地理位置,间隔符
//百度查询接口为异步，所以这里要用异步回调方式
function getBDAddress(callBackFun,spStr){
<span style="white-space:pre">	</span>if (!spStr){spStr="";} //分隔符，默认空
<span style="white-space:pre">	</span>var geolocation = new BMap.Geolocation();
<span style="white-space:pre">	</span>geolocation.getCurrentPosition(function(r){
<span style="white-space:pre">		</span>if(this.getStatus() == BMAP_STATUS_SUCCESS){
<span style="white-space:pre">			</span>var point = new BMap.Point(r.point.lng,r.point.lat);
<span style="white-space:pre">			</span>var gc = new BMap.Geocoder();    
<span style="white-space:pre">			</span>gc.getLocation(point, function(rs){
<span style="white-space:pre">				</span>var addComp = rs.addressComponents;
<span style="white-space:pre">				</span>var addVal = addComp.province + spStr + addComp.city + spStr + addComp.district + spStr + addComp.street + spStr + addComp.streetNumber;
<span style="white-space:pre">				</span>callBackFun(addVal);
<span style="white-space:pre">			</span>});
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>},{enableHighAccuracy: true})
}

有了这个百度地图的js插件后,在页面只需要引入这个插件就行了,下面是html页面的代码: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="bdMap.js"></script>
<body>

标注模式
<div id="map2" style="height:300px;width:400px;border:1px solid #bcbcbc;"></div>
<script type="text/javascript">ShowMap("map2",{city:'郑州',addr:'经三路鑫苑路',title:'吊儿',lawfirm:'XXX公司',tel:'1362380952x',mapx:'',pic:'http://www.shalisoft.com/images/100.jpg',ismove:'1',piobj:'nxp'});</script>
新坐标<input id="nxp" type="text">

<br/><br/>
按地址显示
<div id="map" style="height:300px;width:400px;border:1px solid #bcbcbc;"></div>
<script type="text/javascript">ShowMap("map",{city:'郑州',addr:'经三路鑫苑路',title:'吊儿',lawfirm:'XXX公司',tel:'1362380952x',mapx:'',pic:'http://www.shalisoft.com/images/100.jpg',ismove:'0',piobj:'nxp'});</script>

<br/><br/>
按坐标mapx显示
<div id="map3" style="height:300px;width:400px;border:1px solid #bcbcbc;"></div>
<script type="text/javascript">ShowMap("map3",{title:'吊儿',lawfirm:'XXX公司',tel:'1362380952x',mapx:'113.63156,34.83794',pic:'http://www.shalisoft.com/images/100.jpg',ismove:'0',piobj:'nxp'});</script>

<br/><br/>
按城市显示
<div id="map4" style="height:300px;width:400px;border:1px solid #bcbcbc;"></div>
<script type="text/javascript">ShowMap("map4",{city:'郑州金水区',title:'吊儿',lawfirm:'XXX公司',tel:'1362380952x',pic:'http://www.shalisoft.com/images/100.jpg',ismove:'0',piobj:'nxp'});</script>

<br/><br/>
按IP定位显示
<div id="map5" style="height:300px;width:400px;border:1px solid #bcbcbc;"></div>
<script type="text/javascript">ShowMap("map5",{title:'吊儿',lawfirm:'XXX公司',tel:'1362380952x',pic:'http://www.shalisoft.com/images/100.jpg',ismove:'0',piobj:'nxp'});</script>

<br/><br/>
使用说明：<br/>
1、 在head引用bdMap.js<br/>
2、 设置DIV容器<div id="map" style="height:400px;width:600px;border:1px solid #bcbcbc;"></div><br/>
3、 JS执行ShowMap("map",{city:'郑州',addr:'经三路鑫苑路',title:'吊儿',lawfirm:'XXX公司',tel:'1362380952x',pic:'http://www.shalisoft.com/images/100.jpg',ismove:'0'});
<br/><br/>
ShowMap参数说明：<br/>
  objname: DIV容器名称。<br/>
  options: 属性定义。说明如下：<br/>
      city: 默认定位的城市<br/>
      addr: 标注地址。<br/>
      title: 窗口标题<br/>
      lawfirm: 公司名称<br/>
      tel: 联系电话<br/>
      user: 主任，（可以在bdMap里自定义自己的显示名字）<br/>
      mapx: 标注地图的地址<br/>
      pic: 显示照片<br/>
      ismove: 是否可以拖动标注点（设置标注时会用的着）<br/>
      piobj: 接收拖动坐标的表单ID（设置标注时用于接受拖动后的坐标）<br/>
      zoom: 地图放大等级 默认14<br/>

<br/>
<font color=red>注意：</font>标注坐标显示的先后顺序：先按mapx ，mapx为空时按addr，addr为空时按city，city为空时按IP定位


<br/><br/>
getBDAddress 根据浏览器获取地址：(需要浏览器支持html5)<br/>
  callBackFun: 获取回调函数<br/>
  spStr: 返回信息的分隔符，默认空。可以设置为,号。返回格式：省,市,区,街,门牌<br/>

<script>
function setAdd(v){
	document.getElementById("show").innerHTML = v;
}
getBDAddress(setAdd);
</script>
演示：<span id="show"></span>

<br/><br/>
2014年5月21日 增加公交查询功能。
<br/>
2016年2月29日 改显示窗体为SearchInfoWindow。

<p align="center"><a href="http://www.shalisoft.com" title="访问沙里软件">沙里软件</a> http://www.ShaliSoft.com</p>
</body>
</html>
效果图如下:

标注模式:


按地址显示:


按坐标mapx显示:


默默说一句:这个图片上面的人,不是本人,谢谢!

按城市显示:


按IP定位显示:




来源:http://www.ShaliSoft.com




Love丶兰
关注
专栏目录
百度地图 测距
weixin_33709609的博客
04-08 629
复制出以下代码至xxx.html文件 自测   &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;&lt;title&gt;全插件&lt;/title&gt;&lt;script type="text/javascrip
推荐一款强大的地图插件：Leaflet-Sidebar
最新发布
gitblog_00508的博客
08-16 548
推荐一款强大的地图插件：Leaflet-Sidebar leaflet-sidebarA responsive sidebar for Leaflet maps项目地址:https://gitcode.com/gh_mirrors/le/leaflet-sidebar 项目介绍 在地理信息可视化领域中，Leaflet 是一个杰出的 JavaScript 库，它提供了功能强大且易于使用的 API ...
百度地图，简单插件
09-13
拖动描点获取地图位置信息，包括经纬度坐标，地理位置等信息，简单的地图插件，适合新手入门。直接下载就可以使用进行演示
百度地图 地址 插件
11-16
百度地图 IP定位 选择地址搜索等百度地图 IP定位 选择地址搜索等百度地图 IP定位 选择地址搜索等百度地图 IP定位 选择地址搜索等
百度地图插件的使用
weixin_44161385的博客
09-07 467
百度地图开发文档
wordpress百度地图插件
10-20
【WordPress百度地图插件】是为WordPress网站提供的一种功能扩展，它允许用户在网站上集成百度地图服务，提升用户体验，特别是在展示地理位置、店铺位置或提供导航功能时非常实用。这款插件的安装和配置通常相对简单...
前端基于百度地图插件
04-17
本文将深入探讨如何在前端项目中基于百度地图插件进行开发，以及如何配置地图周围环境。 首先，我们需要在项目中引入百度地图的JavaScript库。通常，可以通过在HTML文件中添加CDN链接来实现： ```html ...
百度地图插件下载直接使用
03-18
本主题聚焦于“百度地图插件下载直接使用”，这是一个关于如何在网站中集成和利用百度地图服务的教程。 首先，我们需要理解百度地图API。百度地图API（Application Programming Interface）是百度提供的一项服务，...
百度地图插件，方便web开发
04-13
web开发中， 经常用到地图的插件，这是一个完整的demo，下载打开index.html即可使用，欢饮下载
百度地图测距工具：DistanceTool_min.js
01-07
作用：测距工具。通过此工具用户可测量地图上任意位置之间的距离。
在线地图插件simpleGIS
04-15
可以在arcgis环境进行在线地图操作，支持arcgis 10.2以下的版本
在线地图插件SimpleGIS
04-27
在线地图插件SimpleGIS，可以调用多平台的在线地图服务
【快速上手】Vue如何通过百度地图插件——vue-baidu-map插件实现地图轨迹与路线等功能
热门推荐
weixin_43746402的博客
06-28 1万+
现在挺多博主都做的挺完整的地图文档使用介绍等等，但有时候我们接触去选择自己做的效果时候还是会遇到很多不同的问题。这里我把我自己个人在各个检索下的文章，做出自己想要的效果地图，基础地图功能＋路线+运动轨迹的过程介绍一下对应组件使用与注意事项。
vue百度地图插件
weixin_42588966的博客
12-18 927
1. 最终效果 2. 申请百度地图秘钥 https://blog.csdn.net/weixin_42813606/article/details/88556804 3. 代码 （1）定义 地图组件：map.vue（重要的2个参数：中心点坐标和秘钥） <template> <!-- 这是地图组价, 是一个公共的组件 --> <div :id="id"...
报错AMap.Driving is not a constructor
06-01
如果您在使用高德地图JavaScript API时遇到了“AMap.Driving is not a constructor”错误，这可能是因为您未正确引入Driving插件或引入方式不正确。 您需要在HTML页面中正确引入AMap API和Driving插件，例如： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>地图示例</title> <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的key值"></script> <script src="https://webapi.amap.com/ui/1.0/main.js"></script> <link rel="stylesheet" href="https://cache.amap.com/lbs/static/AMapUI-1.0-1.10.1.css"/> <script src="https://cache.amap.com/lbs/static/addToolbar.js"></script> </head> <body> <div id="mapContainer" style="height: 500px;"></div> <script> // 创建地图 var map = new AMap.Map('mapContainer', { center: [116.397428, 39.90923], zoom: 13 }); // 创建Driving对象 var driving = new AMap.Driving({ map: map, panel: 'panel' }); </script> </body> </html> ``` 上面的代码演示了如何正确引入高德地图API和Driving插件，然后创建Driving对象。如果您仍然遇到问题，请检查您的代码和API文档，以确保您正确地使用了Driving插件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值