高德地图JavaScript开发

最新推荐文章于 2024-07-12 16:27:40 发布

a67700363

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量86

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shuiyunsf/p/5996936.html

版权

项目需求：标注一个或者两个点、显示信息窗体、自定义icon

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        height: 100%;
        margin: 0px;
        font-family: "微软雅黑"
      }
      .content{
          padding-right: 5px;
        color: #666;
        line-height: 23px;
        font-size: 14px;
      }</style>
    <title>定位</title>
    
  </head>
  <body>
   <div id="container" tabindex="0"></div>
   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=申请的key"></script>
   <script type="text/javascript">
        var pt1=${pt1};
        var pt2=${pt2};
        var location1 = "上海市盛夏路666号";
        var location2 = "上海市南京西路";
        //初始化地图对象，加载地图
        var mapObj = new AMap.Map('container',{
            resizeEnable: true,
        });
        //实例化marker pt为经纬度，infoTest为信息窗体显示文案，iconSrc为标注图标路径 
        function addMarker(pt,infoText,iconSrc){  
            marker=new AMap.Marker({
                //标注图标
                icon:new AMap.Icon({
                    imageSize:new AMap.Size(24,40),
                    size:new AMap.Size(24,40),
                    image:iconSrc
                })
            });
            marker.setMap(mapObj); 
            marker.setPosition(pt);
            //信息窗体内容
            var infowindow = new AMap.InfoWindow({
                content: '<div class="content">'+infoText+'</div>',
                offset: new AMap.Pixel(5, -30)
            });
            //标注点击时显示信息窗体
            marker.on('click',function(e){
              infowindow.open(mapObj,e.target.getPosition());
            });
            infowindow.open(mapObj,marker.getPosition());
        };
        //地图工具条插件、地图比例尺插件
        AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
            var toolBar = new AMap.ToolBar();
            var scale = new AMap.Scale();
            mapObj.addControl(toolBar);
            mapObj.addControl(scale);
        });
        //添加点标记
        if(pt1 != ''){
            addMarker(pt1,location1,"/resources/img/endIcon.png");
            if(pt2 != ''){
                //设置地图到合适的视野级别
                mapObj.setFitView();
            }else{
                //设置地图缩放比例
                mapObj.setZoom(14);
                //设置地图中心
                mapObj.setCenter(pt1);
            }
        };
        if(pt2 != ''){
            addMarker(pt2,location2,"/resources/img/signInIcon.png");
            if(pt1 != ''){
                //设置地图到合适的视野级别
                mapObj.setFitView();
            }else{
                //设置地图缩放比例
                mapObj.setZoom(14);
                //设置地图中心
                mapObj.setCenter(pt2);
            };
        };
       </script>
  </body>
</html>

转载于:https://www.cnblogs.com/shuiyunsf/p/5996936.html

a67700363

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高德地图JavaScript开发

项目需求：标注一个或者两个点、显示信息窗体、自定义icon<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1">...
复制链接

扫一扫