使用百度地图api创建和在指定位置显示高清地图，并在定位地点添加标记。

楚明允

于 2024-05-20 16:45:55 发布

阅读量148

点赞数 3

文章标签： dubbo

本文链接：https://blog.csdn.net/qq_45735625/article/details/138851934

版权

实现功能描述：实现功能描述：页面加载可显示默认地点；可在输入框输入想要查看的地址，将地址解析结果显示在地图上，并调整地图视野；

实现效果图如下：默认地址为寒山寺；

实现代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
  <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
  <title>百度地图API自定义地图</title>
  <!--引用百度地图API-->
  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您申请的ak密钥"></script>
</head>
<style>
  #map {
    width: 700px;
    height: 550px;
    border: #ccc solid 1px;
    font-size: 12px;
    margin-top: 10px;
  }
</style>

<body>
  <!--百度地图容器-->
  城市名: <input id="cityName" type="text" />
  <button onclick="theLocation()">查询</button>
  <div id="map"></div>
   <p style="color:red;font-weight:600">地图生成工具基于百度地图JS api v2.0版本开发，使用请申请密匙。
    <a href="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7"
      target="_blank">了解如何申请密匙</a>
    <a href="http://lbsyun.baidu.com/apiconsole/key?application=key" style="color:#2f83c7" target="_blank">申请密匙</a>
  </p>
</body>
<script type="text/javascript">
  // 实现功能描述：页面加载可显示默认地点； 可在输入框输入想要查看的地址，将地址解析结果显示在地图上，并调整地图视野；
  function theLocation() {
    var city = document.getElementById("cityName").value;
    if (city != "") {
      //             map.centerAndZoom(city,11); 
      //         }
      //       }  
      var map = new BMapGL.Map('map');
      map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 12);//将定位中的地点放在地图中心
      //创建地址解析器实例
      var myGeo = new BMapGL.Geocoder();

      var zoomCtrl = new BMapGL.ZoomControl();  
      map.addControl(zoomCtrl); // 添加缩放控件
      // 将地址解析结果显示在地图上，并调整地图视野
      myGeo.getPoint(city, function (point) {
        if (point) {
          map.centerAndZoom(point, 16);//将定位中的地点放在地图中心
          //  创建点标记
          let myIcon = new BMapGL.Icon("./img/mark.gif", new BMapGL.Size(30, 55));
          // 创建Marker标注，使用图标
          let marker = new BMapGL.Marker(point, {
            icon: myIcon
          });
          // 将标注添加到地图
          map.addOverlay(marker);
          // map.addOverlay(new BMapGL.Marker(point, { title: city }))//将定位中的地点放在地图中心
        } else {
          alert('您选择的地址没有解析到结果！');
        }
      });
    }
  }
  var map = new BMapGL.Map('map');
  //创建地址解析器实例
  var myGeo = new BMapGL.Geocoder();
  var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
  map.addControl(zoomCtrl);
  // 将地址解析结果显示在地图上，并调整地图视野
  myGeo.getPoint("苏州市姑苏区寒山寺", function (point) {
    if (point) {
      map.centerAndZoom(point, 16);
      map.addOverlay(new BMapGL.Marker(point, { title: '苏州市姑苏区寒山寺' }))
    } else {
      alert('您选择的地址没有解析到结果！');
    }
  });
</script>

</html>

楚明允

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用百度地图api创建和在指定位置显示高清地图，并在定位地点添加标记。

实现功能描述：实现功能描述：页面加载可显示默认地点；可在输入框输入想要查看的地址，将地址解析结果显示在地图上，并调整地图视野；实现效果图如下：默认地址为寒山寺；
复制链接

扫一扫