当前位置：网站首页>Imitate Baidu API of Baidu map page of a website

Imitate Baidu API of Baidu map page of a website

2022-07-24 05:38:00 【amogogo12】

Map page
The illustration is as follows ：
Insert picture description here
Some in the code CSS and JS The document is useless , Test yourself
The code is as follows ：


<!doctype html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
	<base href="https://dt.sofang.com/" />
   
    <script src="/js2.0/jquery-1.11.0.min.js"></script>

    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css" />



        <title> Ruihe Jincheng _ Datong Rui and Jincheng Real Estate _ House price trend _ Datong SouFun </title>
        <meta name="keywords" content=" Ruihe Jincheng | Datong XinPan , Datong new building , SouFun net , Search room - SouFun net "/>
        <meta name="description" content=" SouFun net , Datong new house provides you with details of Rui and Jincheng 、 Rui and Jincheng photo album 、 Ruihe Jincheng house type 、 Ruihe Jincheng price , Datong XinPan , Let you have a more comprehensive understanding of the new real estate , Create the best new house purchase experience for you ！"/>
    
                
        <link rel="stylesheet" href="/css20/list.css?v=1650155485">
    <link rel="stylesheet" href="/css20/community/detail.css?v=1650155485">
    <link rel="stylesheet" href="/css2.0/articleIndex.css?v=1650155485">
    <script src="/js/chart/Chart.js"></script>
    <script src="/js2.0/jquery.qrcode.min.js"></script>
    <script src="/js/point_interest.js?v=1.5.9"></script>
    <script src="/js2.0/userFollow.js?v=1.5.9"></script>
    <link rel="stylesheet" href="/css20/component/popup_window.css?v=1.5.9">
    <link rel="stylesheet" type="text/css" href="/css20/discount_component.css?t=1650155485" />
    <script> var con = '[]'; </script>
    
</head>
<body>
       <div id="map" style="padding-top: 32px;float: left;">
            <div class="map" style="position: relative;">
                                <div class="map-title">
                     Location perimeter 
                </div>
                <div class="" style="margin-top: 12px;">
                     Location  ： North of Xijing street in the urban area   Plot on the west side of Yong'an Road 
                </div>
                                <div class="" style="height: 50px;">
                    <ul class="map-ul" style="margin-top: 12px;">
                        <li class="click curpos"> Property location </li>
                        <li class="chechData" attr=" transit " title=" The surrounding buses "> transit </li>
                        <li class="chechData" attr=" metro " title=" Surrounding subway "> metro </li>
                        <li class="chechData" attr=" education " title=" Peripheral Education "> education </li>
                        <li class="chechData" attr=" The hospital " title=" Surrounding hospitals "> The hospital </li>
                        <li class="chechData" attr=" Bank " title=" Peripheral bank "> Bank </li>
                        <li class="chechData" attr=" shopping " title=" Shopping around "> shopping </li>
                        <li class="chechData" attr=" Restaurant " title=" Surrounding catering "> Restaurant </li>
                        <li class="chechData" attr=" Bodybuilding " title=" Peripheral fitness "> Bodybuilding </li>
                    </ul>
                </div>
                                <div id="container" style="width: 1200px;height: 530px;margin-top: 8px;float: left;"></div>
                <div class="assort_nav" style="background-color:white;width: 330px;height: 533px;border: 1px solid rgba(219,222,226,1);position: absolute;right: 0px;top:103px;">
                    <div id="zk" class="zk"></div>
                    <h2 id="soukey" style="margin-left:16px;background-color:white;height:57px;width: 298px;border-bottom:1px solid rgba(219,222,226,1);font-size:16px;font-family:MicrosoftYaHei;color:rgba(48,49,51,1);line-height:57px;"></h2>
                    <div id="r-result" style="height: 478px;overflow-y: auto;"></div>
                </div>
            </div>
        </div>
		
		
		 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Y1kG709UBP4L0ac6SvTjxnm7"></script>
    <script type="text/javascript"> $(document).ready(function () {
       // Longitude and latitude  var longitude = "0"; var latitude = "0"; if ((longitude == 0) && (longitude == 0)) {
       longitude = 113.366546; latitude = 40.087993; } var map = new BMap.Map("container"); //  Create a map instance  var point = new BMap.Point(longitude, latitude); //  Create point coordinates  map.centerAndZoom(point, 15); map.enableScrollWheelZoom(true); //  Default tag  function curpos() {
       map.clearOverlays(); // Current real estate address  var marker2 = new BMap.Marker(point); //  Create annotations  map.addOverlay(marker2); var opts = {
       position: point, //  Specifies the geographic location of the text annotation  offset: new BMap.Size(-45, -50) // Set text offset  } var label = new BMap.Label("&nbsp; Current property location &nbsp;", opts); //  Create text annotation objects  label.setStyle({
       color: "red", fontSize: "12px", height: "20px", lineHeight: "20px", fontFamily: " Microsoft YaHei " }); map.addOverlay(label); } // Click around  $('.chechData').bind('click', function (e) {
       e.stopPropagation(); e.preventDefault(); var data1 = $(this).attr('attr'); var data2 = $(this).text(); chechData(data1, data2); $(this).addClass("click"); $(this).siblings().removeClass("click") }); function chechData(data1, data2) {
       $('#soukey').text(data2); $('.periphery_nav').hide(); $('.periphery_build').show(); curpos(); $('.assort_nav').show(); $('soukey').html('<i></i>' + data2); var circle = new BMap.Circle(point, 1000, {
       fillColor: "blue", strokeWeight: 1, fillOpacity: 0.3, strokeOpacity: 0.3 }); map.addOverlay(circle); var local = new BMap.LocalSearch(map, {
       renderOptions: {
      map: map, panel: "r-result", autoViewport: false}, // renderOptions: {map: map}, pageCapacity: 6, onSearchComplete: function (results) {
       console.log(results) } }); local.searchNearby(data1, point, 1000); } $('.curpos').click(function (e) {
       e.stopPropagation(); e.preventDefault(); var c_name = " Address name "; var c_address = " North side of urban street   Plot on the west side of Yong road "; $(this).siblings().removeClass("click"); $(this).addClass("click"); map.clearOverlays(); // Current real estate address  var marker2 = new BMap.Marker(point); //  Create annotations  map.addOverlay(marker2); var opts = {
       width: 100, //  Information window width  height: 70, //  Information window height  title: " The name of the property ：" + c_name, //  Message window title  offset: new BMap.Size(-5, -20) // Set text offset  } var infoWindow = new BMap.InfoWindow(" Address ：" + c_address, opts); //  Create information window object  map.openInfoWindow(infoWindow, point); // Open the message window  $('.assort_nav').hide(); }).trigger('click'); }); </script></body>
</html>

The longitude and latitude inside and the text can be used after modification . If it helps you, please like . Please forgive me if there is any mistake

原网站

版权声明
本文为[amogogo12]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/205/202207240516134423.html

边栏推荐

猜你喜欢

随机推荐