google map和百度地图调用javascript

z直接复制代码即可

<!DOCTYPE html>

<html>

<head>

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

<style type="text/css">

  html { height: 100% }

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

  #map_canvas { height: 100% }

</style>

<script type="text/javascript"

    src="https://maps.google.com/maps/api/js?sensor=false">

</script>

<script type="text/javascript">

  var marker;

  var map;

  var address = "温州市鹿城区人民中路2号环球大厦一层西侧";//从php里获取从外部传过来的地址

  var currentLatlng;

  function initialize() {

    var latlng = new google.maps.LatLng(27.999668,120.67985);

    var myOptions = {

      zoom: 12,

      center: latlng,

      mapTypeControl: true,

      mapTypeId: google.maps.MapTypeId.ROADMAP//标准地图还是卫星地图

    };

    map = new google.maps.Map(document.getElementById("map_canvas"),

        myOptions);

    

      marker= new google.maps.Marker({

      position: latlng, 

      map: map, 

      title:"Hello World!"

      });   

      google.maps.event.addListener(map, 'click', function(event) {

          currentLatlng = event.latLng;

          marker.setPosition(event.latLng);

          setLngLat();

      });

      codeAddress();

  

  }

  function setLngLat(){

       document.getElementById("lng").innerHTML = "经度:"+currentLatlng.lng();

       document.getElementById("lat").innerHTML="纬度:"+currentLatlng.lat();

  }



  function codeAddress() {

    if(address){

        var geocoder = new google.maps.Geocoder();

        geocoder.geocode( { 'address': address}, function(results, status) {

          if (status == google.maps.GeocoderStatus.OK) {

            map.setCenter(results[0].geometry.location);

            currentLatlng = results[0].geometry.location; 

            marker.setPosition(currentLatlng);

            setLngLat();

          } else {

            alert("无法把地址转换成坐标,请检查地址真实性 ");

          }

        });

    }

  }

  function oncfrimlocation(){



        alert("真实的经纬度坐标是" + currentLatlng.lng() + "," + currentLatlng.lat());    

        //在这里把值回传给php

  }  

</script>

</head>

<body onload="initialize()">

<div align="center" padding_top="10">

<div ><p id="lng">    经度:</p></div>

<div id = "lat">        纬度:</div>



<button style="width:200px;height:30px" name="confirm" onclick="oncfrimlocation();">确定</button>

</div>

  <div margin_top = "20" id="map_canvas" style="width:100%; height:80%;margin-top: 20"></div>

</body>

</html>

 

下面是百度地图的代码

<html>

<head>

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

<style type="text/css">

body, html { width: 100%;height: 100%;overflow: hidden;margin:0;}

#allmap { width: 100%;height: 100%;overflow: hidden;margin-top: 50;}

#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}

#r-result{height:100%;width:20%;float:left;}

</style>

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

<title>地址解析</title>

</head>

<body>

<div align="center" padding_top="10">

<div ><p id="lng">    经度:</p></div>

<div id = "lat">        纬度:</div>



<button style="width:200px;height:30px" name="confirm" onclick="oncfrimlocation();">确定</button>

</div>

<div id="allmap"></div>

</body>

</html>

<script type="text/javascript">

//从php文件里获取地址

var address = "温州市文一路33号";

var map = new BMap.Map("allmap");

var point = new BMap.Point(116.331398,39.897445);

var marker ;

map.centerAndZoom(point,12);

map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用

map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用

map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件

map.addControl(new BMap.OverviewMapControl());              //添加默认缩略地图控件

map.addControl(new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_TOP_RIGHT}));   //右上角,打开

map.addControl(new BMap.ScaleControl());                    // 添加默认比例尺控件

map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));                    // 左下

map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));                    // 左上

// 创建地址解析器实例

var myGeo = new BMap.Geocoder();

// 将地址解析结果显示在地图上,并调整地图视野

myGeo.getPoint(address, function(point){

  if (point) {

    map.centerAndZoom(point, 16);

    marker = new BMap.Marker(point);

    marker.enableDragging();    //可拖拽

    map.addOverlay(marker);

 document.getElementById("lng").innerHTML = "经度:"+point.lng;

 document.getElementById("lat").innerHTML="纬度:"+point.lat;

  }

}, "温州市");

function showInfo(e){

 document.getElementById("lng").innerHTML = "经度:"+e.point.lng;

 document.getElementById("lat").innerHTML="纬度:"+e.point.lat;

 marker.setPosition(e.point);

}

map.addEventListener("click", showInfo);

function oncfrimlocation(){

    var p = marker.getPosition();       //获取marker的位置

    alert("marker的位置是" + p.lng + "," + p.lat);    

    //在这里把值回传给php

}

</script>

 

你可能感兴趣的:(JavaScript)