最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】给网站中嵌入国内的某个地图

国内 crifan 1774浏览 0评论
之前一个网页中,嵌入式的是google 地图:
需要换成高德地图
或百度地图
或腾讯地图
都可以。
(如果用百度地图,也是可以的:
百度地图
https://map.baidu.com
后来,也发现:
上海xxx有限公司招聘信息_电话_地址-智联招聘
中的:
查看公司地图:
也可以打开带地图的web页面:
然后去高德地图中找:
上海xxxx1楼
启迪漕河泾科技园 – 高德地图
结果只发现分享,没有看到哪里可以嵌入式html的iframe页面:
高德开放平台 | 高德地图API
后来从:
【聪创科技招聘】-BOSS直聘
看到有这种嵌入的地图:
【聪创科技_聪创科技招聘】上海聪创网络科技有限公司招聘信息-拉勾网
根据上面的html代码,有个:
https://webapi.amap.com
搜到:
高德开放平台 | 高德地图API
静态地图-API文档-开发指南-Web服务 API | 高德地图API
感觉像是这个?
概述-地图 JS API | 高德地图API
更像是这个:
JS API
看到:
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=您申请的key值"></script>
中有:
http://webapi.amap.com
估计就是这个了。
但好像不是iframe,不好添加啊
高德地图 嵌入式 html
入门指南-地图 JS API | 高德地图API
Java-JSP页面嵌入高德地图 – CSDN博客
高德地图 嵌入式 html iframe
iframe内嵌高德地图搜索 – CSDN博客
百度地图 支持iframe嵌入?
iframe引入百度地图显示企业位置 – CSDN博客
腾讯地图开放平台率先支持iOS10 H5定位,助力合作伙伴平稳升级 | 雷锋网
腾讯地图?
腾讯地图
http://map.qq.com
腾讯地图 iframe
前端定位组件 | 腾讯位置服务
地图选点组件 | 腾讯位置服务
去试试:
<iframe id="mapPage" width="100%" height="100%" frameborder=0
    src="http://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp">
</iframe>
但是
<iframe id="mapPage" width="100%" height="600px" frameborder=0
    src="
http://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp
">
</iframe>
效果不够好:
搜:
地图 iframe
百度地图 iframe
百度地图开放平台 | 百度地图API SDK | 地图开发
jspopular – Wiki
地图API示例
http://lbsyun.baidu.com/jsdemo.htm#a1_2
也高德用途类似
也是要申请key才能用
百度地图
http://map.baidu.com/?shareurl=1&poiShareUid=ae52556950d48e455e0d0225
http://j.map.baidu.com/R0QFO
<iframe id="mapPage" width="100%" height="600px" frameborder=0
    src="
http://j.map.baidu.com/R0QFO
">
</iframe>
地图API示例
http://lbsyun.baidu.com/jsdemo.htm#d0_2
baidu-地图 – 如何使用iframe中显示百度地图 – ditu- – ItBoth
网页插入百度地图 – 简书
参考上述的办法,估计高德地图也是可以这么用的。
所以去试试
概述-地图 JS API | 高德地图API
结果还真是,没有简单方面的解释清楚,如何标记一个点
算了。放弃。
还是去弄百度的吧:
创建地图-百度地图生成器
上海xxx有限公司
上海市xxxx1楼
然后把高度改为360后:
<!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" />
<meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<style type="text/css">
    html,body{margin:0;padding:0;}
    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="
http://api.map.baidu.com/api?key=&v=1.1&services=true
"></script>
</head>

<body>
  <!--百度地图容器-->
  <div style="width:360px;height:360px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
    //创建和初始化地图函数:
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }
    
    //创建地图函数:
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(121.281055,31.048028);//定义一个中心点坐标
        map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
    
    //地图事件设置函数:
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数:
    function addMapControl(){
        //向地图中添加缩放控件
    var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_RIGHT,type:BMAP_NAVIGATION_CONTROL_ZOOM});
    map.addControl(ctrl_nav);
                //向地图中添加比例尺控件
    var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
    map.addControl(ctrl_sca);
    }
    
    //标注点数组
    var markerArr = [{title:"上海xxx",content:"上海市松江区中创路68号启迪漕河泾科技园1号楼1楼",point:"121.280427|31.047517",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
         ];
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                        borderColor:"#808080",
                        color:"#333",
                        cursor:"pointer"
            });
            
            (function(){
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click",function(){
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open",function(){
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close",function(){
                    _marker.getLabel().show();
                })
                label.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
                if(!!json.isOpen){
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("
http://app.baidu.com/map/images/us_mk_icon.png
", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }
    
    initMap();//创建和初始化地图
</script>
</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" />
<meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<style type="text/css">
    html,body{margin:0;padding:0;}
    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="
http://api.map.baidu.com/api?key=&v=1.1&services=true
"></script>
</head>

<body>
  <!--百度地图容器-->
  <div style="width:360px;height:360px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
    //创建和初始化地图函数:
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }
    
    //创建地图函数:
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(121.281055,31.048028);//定义一个中心点坐标
        map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
    
    //地图事件设置函数:
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数:
    function addMapControl(){
        //向地图中添加缩放控件
    var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_RIGHT,type:BMAP_NAVIGATION_CONTROL_ZOOM});
    map.addControl(ctrl_nav);
                //向地图中添加比例尺控件
    var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
    map.addControl(ctrl_sca);
    }
    
    //标注点数组
    var markerArr = [{title:"上海xxx",content:"上海市松江区中创路68号启迪漕河泾科技园1号楼1楼",point:"121.280427|31.047517",isOpen:1,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
         ];
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                        borderColor:"#808080",
                        color:"#333",
                        cursor:"pointer"
            });
            
            (function(){
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click",function(){
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open",function(){
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close",function(){
                    _marker.getLabel().show();
                })
                label.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
                if(!!json.isOpen){
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("
http://app.baidu.com/map/images/us_mk_icon.png
", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }
    
    initMap();//创建和初始化地图
</script>
</html>
效果:
【总结】
去:
创建地图-百度地图生成器
无需登录,即可根据提示去操作,最后可以生成百度地图,带标注的效果。
【后记 2018-04-06】
后来发现,上述的办法生成的代码:
<!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=utf-8" />
<meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<style type="text/css">
    html,body{margin:0;padding:0;}
    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="
http://api.map.baidu.com/api?key=&v=1.1&services=true
"></script>
</head>

<body>
  <!--百度地图容器-->
  <div style="width:600px;height:400px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
    //创建和初始化地图函数:
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }
    
    //创建地图函数:
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(121.281587,31.048656);//定义一个中心点坐标
        map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
    
    //地图事件设置函数:
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
        map.disableKeyboard();//禁用键盘上下左右键移动地图,默认禁用(可不写)
    }
    
    //地图控件添加函数:
    function addMapControl(){
        //向地图中添加缩放控件
    var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_RIGHT,type:BMAP_NAVIGATION_CONTROL_ZOOM});
    map.addControl(ctrl_nav);
                //向地图中添加比例尺控件
    var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
    map.addControl(ctrl_sca);
    }
    
    //标注点数组
    var markerArr = [{title:"上海xxx",content:"上海市松江区中创路68号启迪漕河泾科技园1号楼1楼",point:"121.280662|31.048045",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
         ];
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                        borderColor:"#808080",
                        color:"#333",
                        cursor:"pointer"
            });
            
            (function(){
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click",function(){
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open",function(){
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close",function(){
                    _marker.getLabel().show();
                })
                label.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
                if(!!json.isOpen){
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("
http://app.baidu.com/map/images/us_mk_icon.png
", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }
    
    initMap();//创建和初始化地图
</script>
</html>
虽然保存到本地是可以显示地图的:
但是放在Fotuna的Raw Html后:
结果无法显示地图了:
所以只能想办法再去换个能用的。
(后记:
后来无意间发现:
此时打开:
创建地图-百度地图生成器
底部的百度地图,显示的是@2018年了。
且点击获取代码时,会提示:
“地图生成工具基于百度地图JS api v2.0版本开发,为了正常使用百度地图API服务,请在此段代码中加入您的密匙。”
然后回来看之前的代码发现是:
v=1.1版本中,好像是不需要key?
还是和v2.0一样,也是需要key才能用的?
-》感觉是后者,也需要key,才能用地图。
不管怎么样,刚才生成代码时并没有提示,而且还是不能用,所以还是放弃。)
后来无意间从:
地图 | 高德地图API
-》
找到了:
控制台 | 高德开放平台 | 高德地图API
然后可以去定制,生成位置地图:
上海xxx
上海市xxxx楼1楼
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="keywords" content="高德地图,DIY地图,高德地图生成器">
  <meta name="description" content="高德地图,DIY地图,自己制作地图,生成自己的高德地图">
  <title>高德地图 - DIY我的地图</title>
  <style>
    body { margin: 0; font: 13px/1.5 "Microsoft YaHei", "Helvetica Neue", "Sans-Serif"; min-height: 960px; min-width: 600px; }
    .my-map { margin: 0 auto; width: 600px; height: 450px; }
    .my-map .icon { background: url(https://lbs.amap.com/console/public/show/marker.png) no-repeat; }
    .my-map .icon-cir { height: 31px; width: 28px; }
    .my-map .icon-cir-red { background-position: -11px -5px; }
    .amap-container{height: 100%;}
  </style>
</head>
<body>
  <div id="wrap" class="my-map">
    <div id="mapContainer"></div>
  </div>
  <script src="//webapi.amap.com/maps?v=1.3&key=8325164e247e15eea68b59e89200988b"></script>
  <script>
  !function(){
    var infoWindow, map, level = 15,
      center = {lng: 121.2739, lat: 31.042701},
      features = [{type: "Marker", name: "上海xxx", desc: "上海xxxx楼", color: "red", icon: "cir", offset: {x: -9, y: -31}, lnglat: {lng: 121.2739, lat: 31.042701}}];

    function loadFeatures(){
      for(var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++){
        data = features[i];
        switch(data.type){
          case "Marker":
            feature = new AMap.Marker({ map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
              zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,
              content: '<div class="icon icon-' + data.icon + ' icon-'+ data.icon +'-' + data.color +'"></div>' });
            break;
          case "Polyline":
            for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){
              path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
            }
            feature = new AMap.Polyline({ map: map, path: path, extData: data, zIndex: 2,
              strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity });
            break;
          case "Polygon":
            for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){
              path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
            }
            feature = new AMap.Polygon({ map: map, path: path, extData: data, zIndex: 1,
              strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,
              fillColor: data.fillColor, fillOpacity: data.fillOpacity });
            break;
          default: feature = null;
        }
        if(feature){ AMap.event.addListener(feature, "click", mapFeatureClick); }
      }
    }

    function mapFeatureClick(e){
      if(!infoWindow){ infoWindow = new AMap.InfoWindow({autoMove: true}); }
      var extData = e.target.getExtData();
      infoWindow.setContent("<h5>" + extData.name + "</h5><div>" + extData.desc + "</div>");
      infoWindow.open(map, e.lnglat);
    }

    map = new AMap.Map("mapContainer", {center: new AMap.LngLat(center.lng, center.lat), level: level});
    
    loadFeatures();

    map.on('complete', function(){
      map.plugin(["AMap.ToolBar", "AMap.Scale"], function(){
        map.addControl(new AMap.ToolBar({ruler: false, direction: false, locate: false}));
      map.addControl(new AMap.Scale);
      });
    })
    
  }();
  </script>
</body>
</html>
去试试能否正常显示
是可以的:
点击也可以显示标注:

转载请注明:在路上 » 【已解决】给网站中嵌入国内的某个地图

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
88 queries in 0.427 seconds, using 22.18MB memory