查看了百度 api 的单例, 想实现 "根据读取的地址加载地图并显示标注和地址信息, 可放大和查看路线" 的效果, 实验了一下, 基本可以实现了.
但还有些小问题没整明白:
1: 把 id="mapName" 的标签换成 < span > 地图上就不显示标注了, 无法定位了;
2: 地址里出现 "()" 也无法定位了.
可能我是直接拿百度 API 中 "关键字提示输入" 实例修改的原因.
下面是代码: 期待优化中, 大家有建议可以提一下.
百度地图的运行, 需要自己注册个 ak; 此 ak 仅限调试, 请勿商用;
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 根据读取的地址异步加载地图并显示标注和地址信息, 可放大和查看路线 </title>
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=o9oql7gEEBwz9oih9K6IcRkrux69Szj3"></script>
- <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
- <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.CSS" />
- <style type="text/css">
- body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
- #allmap {height: 500px;width:100%;overflow: hidden;}
- </style>
- </head>
- <body>
- <h3 > 根据读取的地址异步加载地图并显示标注和地址信息, 可放大和查看路线 </h3>
- <div> 地址:<div id="mapName"> 合肥市经开区繁华大道 558 号百乐门广场尚
泽国际 18 楼 (繁华大道与莲花路交叉口)</div></div>
- <div id="allmap"></div>
- <script type="text/javascript">
- // 百度地图 API 功能
- var map = new BMap.Map("allmap");
- map.centerAndZoom("合肥",18);
- map.enableScrollWheelZoom(); // 启用滚轮放大缩小, 默认禁用
- map.enableContinuousZoom(); // 启用地图惯性拖拽, 默认禁用
- var myAddress = document.getElementById("mapName").innerText;
- // 如果有标注, 标注不出现. 截取 "()"
- var n=myAddress.indexOf("(");
- var myValue = myAddress.trim().slice(0,n);
- setPlace();
- // 根据返回的地址, 标注地图
- function setPlace(){
- map.clearOverlays(); // 清除地图上所有覆盖物
- function myFun(){
- var pp = local.getResults ().getPoi(0).point; // 获取第一个智能搜索的结果
- map.centerAndZoom(pp, 12);
- map.addOverlay(new BMap.Marker(pp)); // 添加标注
- }
- var local = new BMap.LocalSearch(map, { // 智能搜索
- onSearchComplete: myFun
- });
- local.search(myValue);
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/16950/e0e13bebf152f9555bf455195907caba.html