如何使用php在谷歌地图中按位置显示多个区域 [英] How to show multiple areas by location in google maps using php

问题描述

这里是初始化函数.....

 函数初始化（）{
  
 
 $ p这里变量$ Latitude，$ Longitude是数组值，所以我如何将它们存储在Javascript变量中，以便它们可以存储上面的数组值.... 
  var lat ='<？php echo $ Latitude？>'; 
 var lon ='<？php echo $ Longitude？>'; 
 var latlng = new google.maps.LatLng（lat，lon）; 
 var myOptions = {
 zoom：10，
 center：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
  
这里我如何循环地理编码器以使用上面的数组变量显示多个区域... 
  map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 geocoder = new google.maps.Geocoder（）; 
 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map，
 title：Hello World！
 }）; 
 
  
 
 
解决方案
通过使用区域名称或经纬度， lng ，在Google地图中绘制多个区域。   
 
 
  var map; var geocoder; var marker; var people = new Array（）; var latlng; var infowindow; $（document）.ready（function（）{ViewCustInGoogleMap（）;}）;函数ViewCustInGoogleMap（）{var mapOptions = {center：new google.maps.LatLng（11.0168445，76.9558321），// Coimbatore =（11.0168445，76.9558321）zoom：7，mapTypeId：google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map（document.getElementById（map-canvas），mapOptions）; //从数据库获取数据。它应该像下面的格式，或者你可以改变它。 var data ='[{DisplayText：adcv，ADDRESS：Jamiya Nagar Kovaipudur Coimbatore-641042，LatitudeLongitude：10.9435131,76.9383790，MarkerId：Customer}，{DisplayText ：abcd，ADDRESS：Coimbatore-641042，LatitudeLongitude：11.0168445,76.9558321，MarkerId：Customer}]'; people = JSON.parse（data）; for（var i = 0; i< people.length; i ++）{setMarker（people [i]）; }}函数setMarker（people）{geocoder = new google.maps.Geocoder（）; infowindow = new google.maps.InfoWindow（）; if（（people [LatitudeLongitude] == null）||（people [LatitudeLongitude] =='null'）||（people [LatitudeLongitude] ==''））{geocoder.geocode（{ address'：people [Address]}，function（results，status）{if（status == google.maps.GeocoderStatus.OK）{latlng = new google.maps.LatLng（results [0] .geometry.location。 lat（），results [0] .geometry.location.lng（））; marker = new google.maps.Marker（{position：latlng，map：map，draggable：false，html：people [DisplayText]，icon ：images / marker /+ people [MarkerId] +.png}）; // marker.setPosition (latlng）; //map.setCenter(latlng）; google.maps.event.addListener（marker， '点击'，功能（事件）{infowi ndow.setContent（this.html）; infowindow.setPosition（event.latLng）; infowindow.open（map，this）; }）; } else {alert（people [DisplayText] + - + people [Address] +。该地址无法找到）; }}）; }其他{var latlngStr = people [LatitudeLongitude]。split（，）; var lat = parseFloat（latlngStr [0]）; var lng = parseFloat（latlngStr [1]）; latlng = new google.maps.LatLng（lat，lng）; marker = new google.maps.Marker（{position：latlng，map：map，draggable：false，//不能拖拽html：people [DisplayText] //点击内容显示// icon：images / marker .png//给你自己的图片}）; //marker.setPosition(latlng）; //map.setCenter(latlng）; google.maps.event.addListener（marker，'click'，function（event）{infowindow.setContent（this.html）; infowindow.setPosition（event.latLng）; infowindow.open（map，this）;}）; }}  
 
 < script src =http：// code.jquery.com/jquery-1.10.2.min.jstype =text / javascript>< / script> < script src =http://maps.googleapis.com/maps/api/js?key=AIzaSyA7IZt-36CgqSGDFK8pChUdQXFyKIhpMBY&sensor=truetype =text / javascript>< / script> < div id =map-canvasstyle =width：800px; height：500px;> < / div>  
 
 
 
 
Here is the Initialise function.....
        function initialize() {
Here the variables $Latitude,$Longitude are array values so how can i store them in Javascript Variables so that they can store the above array values....
var lat='<?php echo $Latitude?>';
var lon='<?php echo $Longitude?>';
var latlng = new google.maps.LatLng(lat,lon);
var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
Here how can i loop the geocoder to show multiple areas using above array variables...
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  geocoder = new google.maps.Geocoder();

  var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title: "Hello World!"
  });
}

解决方案
Its my sample code to plot multiple areas in google map by using area name or lat,lng.



        var map;
        var geocoder;
        var marker;
        var people = new Array();
        var latlng;
        var infowindow;

        $(document).ready(function() {
            ViewCustInGoogleMap();
        });

        function ViewCustInGoogleMap() {

            var mapOptions = {
                center: new google.maps.LatLng(11.0168445, 76.9558321),   // Coimbatore = (11.0168445, 76.9558321)
                zoom: 7,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            // Get data from database. It should be like below format or you can alter it.

            var data = '[{ "DisplayText": "adcv", "ADDRESS": "Jamiya Nagar Kovaipudur Coimbatore-641042", "LatitudeLongitude": "10.9435131,76.9383790", "MarkerId": "Customer" },{ "DisplayText": "abcd", "ADDRESS": "Coimbatore-641042", "LatitudeLongitude": "11.0168445,76.9558321", "MarkerId": "Customer"}]';

            people = JSON.parse(data); 

            for (var i = 0; i < people.length; i++) {
                setMarker(people[i]);
            }

        }

        function setMarker(people) {
            geocoder = new google.maps.Geocoder();
            infowindow = new google.maps.InfoWindow();
            if ((people["LatitudeLongitude"] == null) || (people["LatitudeLongitude"] == 'null') || (people["LatitudeLongitude"] == '')) {
                geocoder.geocode({ 'address': people["Address"] }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                        marker = new google.maps.Marker({
                            position: latlng,
                            map: map,
                            draggable: false,
                            html: people["DisplayText"],
                            icon: "images/marker/" + people["MarkerId"] + ".png"
                        });
                        //marker.setPosition(latlng);
                        //map.setCenter(latlng);
                        google.maps.event.addListener(marker, 'click', function(event) {
                            infowindow.setContent(this.html);
                            infowindow.setPosition(event.latLng);
                            infowindow.open(map, this);
                        });
                    }
                    else {
                        alert(people["DisplayText"] + " -- " + people["Address"] + ". This address couldn't be found");
                    }
                });
            }
            else {
                var latlngStr = people["LatitudeLongitude"].split(",");
                var lat = parseFloat(latlngStr[0]);
                var lng = parseFloat(latlngStr[1]);
                latlng = new google.maps.LatLng(lat, lng);
                marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    draggable: false,               // cant drag it
                    html: people["DisplayText"]    // Content display on marker click
                    //icon: "images/marker.png"       // Give ur own image
                });
                //marker.setPosition(latlng);
                //map.setCenter(latlng);
                google.maps.event.addListener(marker, 'click', function(event) {
                    infowindow.setContent(this.html);
                    infowindow.setPosition(event.latLng);
                    infowindow.open(map, this);
                });
            }
        }

    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA7IZt-36CgqSGDFK8pChUdQXFyKIhpMBY&sensor=true" type="text/javascript"></script>

    <div id="map-canvas" style="width: 800px; height: 500px;">
    </div>





                        
这篇关于如何使用php在谷歌地图中按位置显示多个区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！