页面中引入地图js

其实很简单....

第一种百度

<!DOCTYPE>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<title>百度地图</title>

    <style type="text/css">

        html{height:100%}

        body{height:100%;margin:0px;padding:0px}

        #container{height:100%}

    </style>

    <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>

</head>

<body>

 

 

<input type="text" id="cityName" value="福州"/>

<input type="button" onclick="setCity()" value="查找" />

<div id="container" style="width:1024px;height:600px;"></div>

 

 

<script type="text/javascript">

    var map = new BMap.Map("container");        //在container容器中创建一个地图,参数container为div的id属性;

 

    var point = new BMap.Point(120.2,30.25);    //创建点坐标

    map.centerAndZoom(point, 14);                //初始化地图，设置中心点坐标和地图级别

    map.enableScrollWheelZoom();                //激活滚轮调整大小功能

    map.addControl(new BMap.NavigationControl());    //添加控件：缩放地图的控件，默认在左上角；

    map.addControl(new BMap.MapTypeControl());        //添加控件：地图类型控件，默认在右上方；

    map.addControl(new BMap.ScaleControl());        //添加控件：地图显示比例的控件，默认在左下方；

    map.addControl(new BMap.OverviewMapControl());  //添加控件：地图的缩略图的控件，默认在右下方； TrafficControl    

 

    var search = new BMap.LocalSearch("中国", {

      onSearchComplete: function(result){

        if (search.getStatus() == BMAP_STATUS_SUCCESS){

          var res = result.getPoi(0);

          var point = res.point;

          map.centerAndZoom(point, 11);

        }

      },renderOptions: {  //结果呈现设置，

        map: map,  

        autoViewport: true,  

        selectFirstResult: true 

      } ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数，有了这个，可以简单的改一下返回的html内容了。

        // alert(html.innerHTML)

      }//这一段可以不要，只不过是为学习更深层次应用而加入的。

    });

 

    function setCity(){

      search.search(document.getElementById("cityName").value);

    }

 

    search.search(document.getElementById("cityName").value);

 

 

</script>

</body>

</html>

第二种：谷歌

首先引入  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>





代码如下  

js代码

 var myLatlng = new google.maps.LatLng(ret.attache.json.lat, ret.attache.json.lng);// 中国地图全图
 var optMap = 
{
zoom: 15,  
center: myLatlng,
streetViewControl:false,
mapTypeControl: true,
mapTypeControlOptions: {
 mapTypeIds: [/**google.maps.MapTypeId.SATELLITE ,google.maps.MapTypeId.HYBRID* */], // comment
 position: google.maps.ControlPosition.TOP_LEFT
},
// navigationControl: true,
navigationControlOptions: {
 style: google.maps.NavigationControlStyle.DEFAULT,
 position: google.maps.ControlPosition.LEFT
},
//ROADMAP SATELLITE  
mapTypeId: google.maps.MapTypeId.ROADMAP
};
     map = new google.maps.Map(document.getElementById('container'),optMap);
 map.setOptions({Zoom:18,center:myLatlng});





html

<div id="locationDiv" >
<div id="container" style="position:relative; width:450px; height:300px;"></div>
</div>

最后编辑于：2017.12.11 02:42:59

页面中引入地图js

第一种 百度

第二种： 谷歌

推荐阅读更多精彩内容

第一种百度

第二种：谷歌