web 集成高德地图

最近的项目有个需求需要网页中内嵌一个高德地图 同时可以进行地址获取地址解析。

Step1.引所需要的 css 和 js 。

  <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=076bbf361a63e6626182b3f0ea1ec6b7&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

Step2.在页面中定义如下div

    <div id="container"></div>
    <div id="myPageTop">
        <table>
            <tr>
                <td>
                    <label>请输入关键字：</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="tipinput"/>
                </td>
            </tr>
        </table>
    </div>

注意：第二个 div 的 id 一定要为 “ myPageTop ” 否则输入地址的 input 框的样式会跑偏

Step3. 在页面中写如下js

 //地图加载 此处的 container 是 页面中第一个 div 的id
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //输入提示
    var autoOptions = {
        //注意此处的 tipinput 是页面中input的id
        input: "tipinput"
    };
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
        map: map
    });  //构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
    	console.log(e);
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  //关键字查询查询
    }
    var clickEventListener = map.on("click", function(e) {
	     // 填写地址
	     console.log(e);
     });

这时就可以出现如下的效果了

在输入框中输入查询的地址 地图中会出现 要查询的点 如上图所示 (图中蓝色的点) ，然后点击一个自己所需要的点就可以获取到经纬度 

如果在输入框中不输入地址则会自动定位到当前所在地址。

还有一种情况就是 存在经纬度的情况下实现地图定点，需要在原有的 js代码 基础上加入如下 js 代码

  //获取经纬度
        var newLng = "118.12312";
        var newLat = "31.13213";

 //设置marker
    var lnglats = [
        [newLng,newLat]
    ];
    var marker = new AMap.Marker({
        position: lnglats[0],
        map: map
    });

以下是在有经纬度的情况下多出来的代码

 这样在有经纬度的情况下 会出现下面这种情况

这样 web 嵌入高德地图 和地址地址获取解析就好啦。